@adamjanicki/ui-extended 1.2.1 → 1.2.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/components/Autocomplete.d.ts +34 -56
- package/components/Autocomplete.js +1 -145
- package/components/Popover.d.ts +8 -11
- package/components/Popover.js +1 -56
- package/components/Tooltip.d.ts +10 -10
- package/components/Tooltip.js +1 -58
- package/index.d.ts +2 -3
- package/index.js +1 -5
- package/package.json +8 -4
|
@@ -1,99 +1,77 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import Popover from "./Popover";
|
|
3
3
|
import { IconInput, ui } from "@adamjanicki/ui";
|
|
4
|
+
import type { ReadonlyableArray } from "@adamjanicki/ui/types/common";
|
|
4
5
|
type Props<T> = {
|
|
5
|
-
/**
|
|
6
|
-
* The value of the input field
|
|
7
|
-
*/
|
|
6
|
+
/** The value of the input field */
|
|
8
7
|
value: string;
|
|
9
8
|
/**
|
|
10
|
-
* Callback for when the input field changes
|
|
11
|
-
* @param event
|
|
9
|
+
* Callback for when the input field changes.
|
|
10
|
+
* @param event Standard React ChangeEvent.
|
|
12
11
|
*/
|
|
13
12
|
onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
14
13
|
/**
|
|
15
|
-
* Callback for when an option is selected
|
|
16
|
-
* @param value
|
|
14
|
+
* Callback for when an option is selected.
|
|
15
|
+
* @param value Selected value.
|
|
17
16
|
*/
|
|
18
17
|
onSelect: (value: T) => void;
|
|
18
|
+
/** The list of available options */
|
|
19
|
+
options: ReadonlyableArray<T>;
|
|
19
20
|
/**
|
|
20
|
-
*
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Predicate to filter options
|
|
25
|
-
* @param option current option
|
|
26
|
-
* @returns true if the option should be displayed
|
|
21
|
+
* Predicate to filter options.
|
|
22
|
+
* @param option Current option.
|
|
23
|
+
* @returns True if the option should be displayed.
|
|
27
24
|
*/
|
|
28
25
|
filterOption?: (option: T) => boolean;
|
|
29
26
|
/**
|
|
30
|
-
* Render function for the option
|
|
31
|
-
* @param option
|
|
32
|
-
* @returns
|
|
27
|
+
* Render function for the option.
|
|
28
|
+
* @param option Current option.
|
|
29
|
+
* @returns Node to render for the option.
|
|
33
30
|
*/
|
|
34
31
|
renderOption?: (option: T) => React.ReactNode;
|
|
35
|
-
/**
|
|
36
|
-
* Node to render when no options are available
|
|
37
|
-
*/
|
|
32
|
+
/** Node to render when no options are available */
|
|
38
33
|
noOptionsNode?: React.ReactNode;
|
|
39
|
-
/**
|
|
40
|
-
* Classname to apply to the root element
|
|
41
|
-
*/
|
|
34
|
+
/** Class name to apply to the root element */
|
|
42
35
|
className?: string;
|
|
43
|
-
/**
|
|
44
|
-
* Style to apply to the root element
|
|
45
|
-
*/
|
|
36
|
+
/** Style to apply to the root element */
|
|
46
37
|
style?: React.CSSProperties;
|
|
47
38
|
/**
|
|
48
|
-
* Group options by a string
|
|
49
|
-
* @param option
|
|
50
|
-
* @returns String to group by
|
|
39
|
+
* Group options by a string.
|
|
40
|
+
* @param option Current option.
|
|
41
|
+
* @returns String to group by.
|
|
51
42
|
*/
|
|
52
43
|
groupBy?: (option: T) => string;
|
|
53
44
|
/**
|
|
54
|
-
* Render function for the group
|
|
55
|
-
* @param group
|
|
56
|
-
* @returns
|
|
45
|
+
* Render function for the group.
|
|
46
|
+
* @param group Name.
|
|
47
|
+
* @returns Node to render for the group.
|
|
57
48
|
*/
|
|
58
49
|
renderGroup?: (group: string) => React.ReactNode;
|
|
59
|
-
/**
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
freeSolo?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* Props for the input field
|
|
65
|
-
*/
|
|
50
|
+
/** Allow free text input */
|
|
51
|
+
customize?: boolean;
|
|
52
|
+
/** Props for the input field */
|
|
66
53
|
InputProps?: React.ComponentProps<typeof IconInput>;
|
|
67
|
-
/**
|
|
68
|
-
* Props for the popover
|
|
69
|
-
*/
|
|
54
|
+
/** Props for the popover */
|
|
70
55
|
popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
|
|
71
|
-
/**
|
|
72
|
-
* Props for the list element
|
|
73
|
-
*/
|
|
56
|
+
/** Props for the list element */
|
|
74
57
|
listProps?: React.ComponentProps<typeof ui.ul>;
|
|
75
|
-
/**
|
|
76
|
-
* Props for the list item elements
|
|
77
|
-
*/
|
|
58
|
+
/** Props for the list item elements */
|
|
78
59
|
listItemProps?: React.ComponentProps<typeof ui.li>;
|
|
79
|
-
/**
|
|
80
|
-
* Footer node to render at the bottom of the popover
|
|
81
|
-
*/
|
|
60
|
+
/** Footer node to render at the bottom of the popover */
|
|
82
61
|
footer?: React.ReactNode;
|
|
83
62
|
/**
|
|
84
|
-
* Close the popover when the footer is clicked
|
|
63
|
+
* Close the popover when the footer is clicked.
|
|
85
64
|
* @default true
|
|
86
65
|
*/
|
|
87
66
|
closeOnFooterClick?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* A callback to be called when the user hits the enter key while no option is selected
|
|
90
|
-
*/
|
|
67
|
+
/** Callback fired when the user hits the Enter key while no option is selected */
|
|
91
68
|
onUnselectedEnter?: () => void;
|
|
92
69
|
/**
|
|
93
|
-
* Whether or not to leave the popover open after a selection occurs
|
|
70
|
+
* Whether or not to leave the popover open after a selection occurs.
|
|
94
71
|
* @default false
|
|
95
72
|
*/
|
|
96
73
|
remainOpenOnSelectOrEnter?: boolean;
|
|
97
74
|
};
|
|
75
|
+
/** Searchable select input with an overlay menu */
|
|
98
76
|
declare const Autocomplete: <T>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
99
77
|
export default Autocomplete;
|
|
@@ -1,145 +1 @@
|
|
|
1
|
-
var
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import React from "react";
|
|
25
|
-
import Popover from "./Popover";
|
|
26
|
-
import { Box, ClickOutside, IconInput, ui } from "@adamjanicki/ui";
|
|
27
|
-
import { classNames } from "@adamjanicki/ui/functions";
|
|
28
|
-
var defaultRenderOption = function (option) { return (_jsx(Box, { vfx: { padding: "s" }, children: "".concat(option) })); };
|
|
29
|
-
var Autocomplete = function (props) {
|
|
30
|
-
var _a, _b;
|
|
31
|
-
var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _g = props.listItemProps, listItemProps = _g === void 0 ? {} : _g, _h = props.listProps, listProps = _h === void 0 ? {} : _h, onUnselectedEnter = props.onUnselectedEnter, _j = props.closeOnFooterClick, closeOnFooterClick = _j === void 0 ? true : _j, _k = props.remainOpenOnSelectOrEnter, remainOpenOnSelectOrEnter = _k === void 0 ? false : _k, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter", "closeOnFooterClick", "remainOpenOnSelectOrEnter"]);
|
|
32
|
-
var inputContainerRef = React.useRef(null);
|
|
33
|
-
var inputRef = React.useRef(null);
|
|
34
|
-
var onRef = React.useRef(null);
|
|
35
|
-
var _l = React.useState(), on = _l[0], setOn = _l[1];
|
|
36
|
-
var _m = React.useState(false), open = _m[0], setOpen = _m[1];
|
|
37
|
-
var filteredOptions = options.filter(filterOption);
|
|
38
|
-
var groupMap = new Map();
|
|
39
|
-
if (groupBy) {
|
|
40
|
-
var uniqueGroups_1 = [];
|
|
41
|
-
filteredOptions.forEach(function (option) {
|
|
42
|
-
var group = groupBy(option);
|
|
43
|
-
if (!uniqueGroups_1.includes(group)) {
|
|
44
|
-
uniqueGroups_1.push(group);
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
var offset_1 = 0;
|
|
48
|
-
filteredOptions = uniqueGroups_1
|
|
49
|
-
.map(function (group) {
|
|
50
|
-
var filtered = filteredOptions.filter(function (option) { return groupBy(option) === group; });
|
|
51
|
-
groupMap.set(offset_1, group);
|
|
52
|
-
offset_1 += filtered.length;
|
|
53
|
-
return filtered;
|
|
54
|
-
})
|
|
55
|
-
.flat();
|
|
56
|
-
}
|
|
57
|
-
if (freeSolo && value.length > 0 && filteredOptions.length === 0) {
|
|
58
|
-
filteredOptions.push(value);
|
|
59
|
-
}
|
|
60
|
-
var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
|
|
61
|
-
var handleChange = function (v) {
|
|
62
|
-
onSelect(v);
|
|
63
|
-
if (!remainOpenOnSelectOrEnter)
|
|
64
|
-
closeMenu();
|
|
65
|
-
};
|
|
66
|
-
var closeMenu = function () {
|
|
67
|
-
var _a;
|
|
68
|
-
setOn(undefined);
|
|
69
|
-
setOpen(false);
|
|
70
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
71
|
-
};
|
|
72
|
-
var openMenu = function () { return setOpen(true); };
|
|
73
|
-
var handleKeys = function (_a) {
|
|
74
|
-
var _b;
|
|
75
|
-
var code = _a.code;
|
|
76
|
-
if (code === "Escape") {
|
|
77
|
-
closeMenu();
|
|
78
|
-
}
|
|
79
|
-
var modulo = filteredOptions.length;
|
|
80
|
-
if (modulo <= 0) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
if (code === "Enter") {
|
|
84
|
-
var current = onRef.current;
|
|
85
|
-
if (current) {
|
|
86
|
-
// Horrible heuristic to handle links
|
|
87
|
-
// It's terrible, but efficient
|
|
88
|
-
var child = current.firstChild;
|
|
89
|
-
if (child && child.nodeName === "A")
|
|
90
|
-
(_b = child.click) === null || _b === void 0 ? void 0 : _b.call(child);
|
|
91
|
-
current.click();
|
|
92
|
-
}
|
|
93
|
-
else if (onUnselectedEnter) {
|
|
94
|
-
onUnselectedEnter();
|
|
95
|
-
if (!remainOpenOnSelectOrEnter)
|
|
96
|
-
closeMenu();
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
if (code === "ArrowDown") {
|
|
100
|
-
setOn(function (on) { return ((on !== null && on !== void 0 ? on : -1) + 1) % modulo; });
|
|
101
|
-
}
|
|
102
|
-
else if (code === "ArrowUp") {
|
|
103
|
-
setOn(function (on) { return ((on !== null && on !== void 0 ? on : 0) - 1 + modulo) % modulo; });
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
React.useEffect(function () {
|
|
107
|
-
var _a;
|
|
108
|
-
(_a = onRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
109
|
-
block: "nearest",
|
|
110
|
-
behavior: "smooth",
|
|
111
|
-
});
|
|
112
|
-
}, [on]);
|
|
113
|
-
var popoverOpen = open && (filteredOptions.length > 0 || value.length > 0);
|
|
114
|
-
return (_jsx(ClickOutside, { onClickOutside: closeMenu, children: _jsxs(Box, __assign({}, rest, { onKeyUp: function (e) { return handleKeys(e); }, children: [_jsx(IconInput, __assign({}, InputProps, { ref: inputContainerRef, inputProps: __assign(__assign({}, (InputProps.inputProps || {})), { value: value, onChange: function (e) {
|
|
115
|
-
setOn(undefined);
|
|
116
|
-
onInputChange(e);
|
|
117
|
-
if (e.target.value) {
|
|
118
|
-
if (!open) {
|
|
119
|
-
openMenu();
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
else {
|
|
123
|
-
focusInput();
|
|
124
|
-
}
|
|
125
|
-
}, onClick: function () {
|
|
126
|
-
if (!open) {
|
|
127
|
-
openMenu();
|
|
128
|
-
}
|
|
129
|
-
}, ref: inputRef, autoComplete: "off" }) })), _jsxs(Popover, __assign({}, popoverProps, { open: popoverOpen, triggerRef: inputContainerRef, vfx: {
|
|
130
|
-
padding: "none",
|
|
131
|
-
margin: "none",
|
|
132
|
-
overflow: "hidden",
|
|
133
|
-
fontWeight: 4,
|
|
134
|
-
}, style: __assign(__assign({}, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.style), { width: (_b = (_a = inputContainerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0 }), children: [_jsx(ui.ul, __assign({}, listProps, { vfx: __assign({ axis: "y", padding: "s", margin: "none", overflow: "scroll" }, listProps.vfx), style: __assign({ maxHeight: 300 }, listProps.style), tabIndex: -1, children: _jsx(_Fragment, { children: filteredOptions.length
|
|
135
|
-
? filteredOptions.map(function (option, index) {
|
|
136
|
-
var group = groupMap.get(index);
|
|
137
|
-
var ref = index === on ? onRef : undefined;
|
|
138
|
-
return (_jsxs(React.Fragment, { children: [group && ((renderGroup === null || renderGroup === void 0 ? void 0 : renderGroup(group)) || group), _jsx(ui.li, __assign({}, listItemProps, { vfx: __assign({ axis: "x", cursor: "pointer", radius: "rounded" }, listItemProps.vfx), ref: ref, onMouseEnter: function () { return setOn(index); }, className: classNames(on === index
|
|
139
|
-
? "aui-autocomplete-on-option"
|
|
140
|
-
: undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: _jsx(_Fragment, { children: renderOption(option) }) }))] }, index));
|
|
141
|
-
})
|
|
142
|
-
: !freeSolo &&
|
|
143
|
-
(noOptionsNode || defaultRenderOption("No results found")) }) })), !!footer && (_jsx(Box, { onClick: closeOnFooterClick ? closeMenu : undefined, children: _jsx(_Fragment, { children: footer }) }))] }))] })) }));
|
|
144
|
-
};
|
|
145
|
-
export default Autocomplete;
|
|
1
|
+
import{jsx as c,Fragment as k,jsxs as S}from"react/jsx-runtime";import d from"react";import se from"./Popover";import{Box as R,ClickOutside as de,IconInput as ve,ui as Z,classNames as pe}from"@adamjanicki/ui";var o=function(){return o=Object.assign||function(e){for(var l,u=1,t=arguments.length;u<t;u++){l=arguments[u];for(var i in l)Object.prototype.hasOwnProperty.call(l,i)&&(e[i]=l[i])}return e},o.apply(this,arguments)},ce=function(e,l){var u={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&l.indexOf(t)<0&&(u[t]=e[t]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var i=0,t=Object.getOwnPropertySymbols(e);i<t.length;i++)l.indexOf(t[i])<0&&Object.prototype.propertyIsEnumerable.call(e,t[i])&&(u[t[i]]=e[t[i]]);return u},$=function(e){return c(R,{vfx:{padding:"s"},children:"".concat(e)})},he=function(e){var l,u,t=e.options,i=e.renderOption,q=i===void 0?$:i,N=e.filterOption,ee=N===void 0?function(){return!0}:N,_=e.groupBy,y=e.renderGroup,ne=e.noOptionsNode,F=e.InputProps,M=F===void 0?{}:F,U=e.customize,B=U===void 0?!1:U,g=e.value,re=e.onInputChange,te=e.onSelect,m=e.popoverProps,z=e.footer,A=e.listItemProps,P=A===void 0?{}:A,K=e.listProps,C=K===void 0?{}:K,W=e.onUnselectedEnter,D=e.closeOnFooterClick,oe=D===void 0?!0:D,G=e.remainOpenOnSelectOrEnter,H=G===void 0?!1:G,ie=ce(e,["options","renderOption","filterOption","groupBy","renderGroup","noOptionsNode","InputProps","customize","value","onInputChange","onSelect","popoverProps","footer","listItemProps","listProps","onUnselectedEnter","closeOnFooterClick","remainOpenOnSelectOrEnter"]),b=d.useRef(null),x=d.useRef(null),I=d.useRef(null),V=d.useState(),w=V[0],p=V[1],J=d.useState(!1),E=J[0],L=J[1],f=t.filter(ee),Q=new Map;if(_){var j=[];f.forEach(function(n){var r=_(n);j.includes(r)||j.push(r)});var T=0;f=j.map(function(n){var r=f.filter(function(a){return _(a)===n});return Q.set(T,n),T+=r.length,r}).flat()}B&&g.length>0&&f.length===0&&f.push(g);var le=function(){var n;return(n=x.current)===null||n===void 0?void 0:n.focus()},ue=function(n){te(n),H||h()},h=function(){var n;p(void 0),L(!1),(n=x.current)===null||n===void 0||n.blur()},X=function(){return L(!0)},ae=function(n){var r,a=n.code;a==="Escape"&&h();var v=f.length;if(!(v<=0)){if(a==="Enter"){var Y=I.current;if(Y){var O=Y.firstChild;(r=O==null?void 0:O.click)===null||r===void 0||r.call(O)}else W&&(W(),H||h())}a==="ArrowDown"?p(function(s){return((s!=null?s:-1)+1)%v}):a==="ArrowUp"&&p(function(s){return((s!=null?s:0)-1+v)%v})}};d.useEffect(function(){var n;(n=I.current)===null||n===void 0||n.scrollIntoView({block:"nearest",behavior:"smooth"})},[w]);var fe=E&&(f.length>0||g.length>0);return c(de,{onClickOutside:h,children:S(R,o({},ie,{onKeyUp:function(n){return ae(n)},children:[c(ve,o({},M,{ref:b,inputProps:o(o({},M.inputProps||{}),{value:g,onChange:function(n){p(void 0),re(n),n.target.value?E||X():le()},onClick:function(){E||X()},ref:x,autoComplete:"off"})})),S(se,o({},m,{open:fe,triggerRef:b,vfx:{padding:"none",margin:"none",overflow:"hidden",fontWeight:4},style:o(o({},m==null?void 0:m.style),{width:(u=(l=b.current)===null||l===void 0?void 0:l.offsetWidth)!==null&&u!==void 0?u:0}),children:[c(Z.ul,o({},C,{vfx:o({axis:"y",padding:"s",margin:"none",overflow:"scroll"},C.vfx),style:o({maxHeight:300},C.style),tabIndex:-1,children:c(k,{children:f.length?f.map(function(n,r){var a=Q.get(r),v=r===w?I:void 0;return S(d.Fragment,{children:[a&&((y==null?void 0:y(a))||a),c(Z.li,o({},P,{vfx:o({axis:"x",cursor:"pointer",radius:"rounded"},P.vfx),ref:v,onMouseEnter:function(){return p(r)},className:pe(w===r?"aui-autocomplete-on-option":void 0,P.className),onClick:function(){return ue(n)},children:c(k,{children:q(n)})}))]},r)}):!B&&(ne||$("No results found"))})})),!!z&&c(R,{onClick:oe?h:void 0,children:c(k,{children:z})})]}))]}))})},ye=he;export{ye as default};
|
package/components/Popover.d.ts
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Box } from "@adamjanicki/ui";
|
|
3
3
|
import { type Placement } from "@floating-ui/react";
|
|
4
|
+
type BoxProps = React.ComponentProps<typeof Box>;
|
|
4
5
|
type Props = BoxProps & {
|
|
5
|
-
/**
|
|
6
|
-
* The trigger ref for the element to position the popover over.
|
|
7
|
-
*/
|
|
6
|
+
/** The trigger ref for the element to position the popover over */
|
|
8
7
|
triggerRef: React.RefObject<HTMLElement | null>;
|
|
9
|
-
/**
|
|
10
|
-
* Whether the popover is open.
|
|
11
|
-
*/
|
|
8
|
+
/** Whether the popover is open */
|
|
12
9
|
open: boolean;
|
|
13
10
|
/**
|
|
14
11
|
* The placement of the popover relative to the trigger element.
|
|
@@ -20,17 +17,17 @@ type Props = BoxProps & {
|
|
|
20
17
|
* @default 0
|
|
21
18
|
*/
|
|
22
19
|
offset?: number;
|
|
23
|
-
/**
|
|
24
|
-
* Callback function to execute when the popover is closed.
|
|
25
|
-
*/
|
|
20
|
+
/** Callback function to execute when the popover is closed */
|
|
26
21
|
onClose?: () => void;
|
|
27
22
|
/**
|
|
28
23
|
* Whether to return focus to the trigger element when the popover is closed
|
|
29
|
-
* by pressing the
|
|
24
|
+
* by pressing the Escape key.
|
|
30
25
|
* @default false
|
|
31
26
|
*/
|
|
32
27
|
returnFocusOnEscape?: boolean;
|
|
33
28
|
};
|
|
29
|
+
/** An unstyled `Popover` */
|
|
34
30
|
export declare const UnstyledPopover: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
|
|
31
|
+
/** A styled `Popover` component */
|
|
35
32
|
declare const Popover: ({ vfx, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
36
33
|
export default Popover;
|
package/components/Popover.js
CHANGED
|
@@ -1,56 +1 @@
|
|
|
1
|
-
var
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
-
import Box from "@adamjanicki/ui/components/Box/Box";
|
|
25
|
-
import { useFloating, autoUpdate, offset, useDismiss, useTransitionStyles, } from "@floating-ui/react";
|
|
26
|
-
export var UnstyledPopover = function (props) {
|
|
27
|
-
var triggerRef = props.triggerRef, open = props.open, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, children = props.children, onClose = props.onClose, _c = props.returnFocusOnEscape, returnFocusOnEscape = _c === void 0 ? false : _c, rest = __rest(props, ["triggerRef", "open", "placement", "style", "offset", "children", "onClose", "returnFocusOnEscape"]);
|
|
28
|
-
var handleOnClose = function () {
|
|
29
|
-
var _a, _b;
|
|
30
|
-
if (!returnFocusOnEscape)
|
|
31
|
-
(_b = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
32
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
33
|
-
};
|
|
34
|
-
var middleware = [offset(placementOffset)];
|
|
35
|
-
var _d = useFloating({
|
|
36
|
-
elements: { reference: triggerRef.current },
|
|
37
|
-
open: open,
|
|
38
|
-
onOpenChange: function (open) {
|
|
39
|
-
if (!open)
|
|
40
|
-
handleOnClose();
|
|
41
|
-
},
|
|
42
|
-
placement: placement,
|
|
43
|
-
whileElementsMounted: autoUpdate,
|
|
44
|
-
middleware: middleware,
|
|
45
|
-
}), floatingStyles = _d.floatingStyles, context = _d.context, refs = _d.refs;
|
|
46
|
-
var _e = useTransitionStyles(context, {
|
|
47
|
-
duration: { open: 0, close: 250 }, // default aui-transition value
|
|
48
|
-
}), isMounted = _e.isMounted, transitionStyles = _e.styles;
|
|
49
|
-
useDismiss(context);
|
|
50
|
-
return isMounted ? (_jsx(Box, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), transitionStyles), style) }, rest, { children: _jsx(_Fragment, { children: children }) }))) : null;
|
|
51
|
-
};
|
|
52
|
-
var Popover = function (_a) {
|
|
53
|
-
var vfx = _a.vfx, rest = __rest(_a, ["vfx"]);
|
|
54
|
-
return (_jsx(UnstyledPopover, __assign({ vfx: __assign({ padding: "s", backgroundColor: "default", border: true, shadow: "floating", radius: "rounded", z: "floating" }, vfx) }, rest)));
|
|
55
|
-
};
|
|
56
|
-
export default Popover;
|
|
1
|
+
import{Fragment as P,jsx as u}from"react/jsx-runtime";import{Box as S}from"@adamjanicki/ui";import{useFloating as E,autoUpdate as M,offset as R,useDismiss as U,useTransitionStyles as k}from"@floating-ui/react";var l=function(){return l=Object.assign||function(e){for(var n,o=1,t=arguments.length;o<t;o++){n=arguments[o];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(this,arguments)},m=function(e,n){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var r=0,t=Object.getOwnPropertySymbols(e);r<t.length;r++)n.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(e,t[r])&&(o[t[r]]=e[t[r]]);return o},z=function(e){var n=e.triggerRef,o=e.open,t=e.placement,r=t===void 0?"bottom":t,y=e.style,c=e.offset,h=c===void 0?0:c,p=e.children,i=e.onClose,d=e.returnFocusOnEscape,O=d===void 0?!1:d,_=m(e,["triggerRef","open","placement","style","offset","children","onClose","returnFocusOnEscape"]),b=function(){var a,f;O||(f=(a=n.current)===null||a===void 0?void 0:a.blur)===null||f===void 0||f.call(a),i==null||i()},x=[R(h)],s=E({elements:{reference:n.current},open:o,onOpenChange:function(a){a||b()},placement:r,whileElementsMounted:M,middleware:x}),j=s.floatingStyles,v=s.context,w=s.refs,g=k(v,{duration:{open:0,close:250}}),F=g.isMounted,C=g.styles;return U(v),F?u(S,l({ref:w.setFloating,style:l(l(l({},j),C),y)},_,{children:u(P,{children:p})})):null},B=function(e){var n=e.vfx,o=m(e,["vfx"]);return u(z,l({vfx:l({padding:"s",backgroundColor:"default",border:!0,shadow:"floating",radius:"rounded",z:"floating"},n)},o))},q=B;export{z as UnstyledPopover,q as default};
|
package/components/Tooltip.d.ts
CHANGED
|
@@ -1,29 +1,27 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Box } from "@adamjanicki/ui";
|
|
3
|
+
import type { Children } from "@adamjanicki/ui/types/common";
|
|
3
4
|
import { type Placement } from "@floating-ui/react";
|
|
5
|
+
type BoxProps = React.ComponentProps<typeof Box>;
|
|
4
6
|
type Props = Omit<BoxProps, "children" | "onMouseEnter" | "onMouseLeave"> & {
|
|
5
|
-
/**
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
tooltipContent: React.ReactNode | React.ReactNode[];
|
|
7
|
+
/** Children to render inside the tooltip container */
|
|
8
|
+
tooltipContent: Children;
|
|
9
9
|
/**
|
|
10
10
|
* The element to attach the tooltip to.
|
|
11
11
|
* **IMPORTANT**: This must be able to hold a ref.
|
|
12
12
|
*/
|
|
13
13
|
children: React.ReactElement<any>;
|
|
14
14
|
/**
|
|
15
|
-
* The placement of the
|
|
15
|
+
* The placement of the tooltip relative to the trigger element.
|
|
16
16
|
* @default "bottom"
|
|
17
17
|
*/
|
|
18
18
|
placement?: Placement;
|
|
19
19
|
/**
|
|
20
|
-
* The offset of the
|
|
20
|
+
* The offset of the tooltip relative to the trigger element.
|
|
21
21
|
* @default 0
|
|
22
22
|
*/
|
|
23
23
|
offset?: number;
|
|
24
|
-
/**
|
|
25
|
-
* Whether to disable the flip behavior of the tooltip.
|
|
26
|
-
*/
|
|
24
|
+
/** Whether to disable the flip behavior of the tooltip */
|
|
27
25
|
disableFlip?: boolean;
|
|
28
26
|
/**
|
|
29
27
|
* Whether the tooltip is disabled. If true, will not show the tooltip.
|
|
@@ -31,6 +29,8 @@ type Props = Omit<BoxProps, "children" | "onMouseEnter" | "onMouseLeave"> & {
|
|
|
31
29
|
*/
|
|
32
30
|
disabled?: boolean;
|
|
33
31
|
};
|
|
32
|
+
/** An unstyled `Tooltip` */
|
|
34
33
|
export declare const UnstyledTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
/** A styled `Tooltip` component */
|
|
35
35
|
export declare const Tooltip: ({ vfx, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
36
36
|
export default Tooltip;
|
package/components/Tooltip.js
CHANGED
|
@@ -1,58 +1 @@
|
|
|
1
|
-
var
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
|
-
import { cloneElement, useState } from "react";
|
|
25
|
-
import Box from "@adamjanicki/ui/components/Box/Box";
|
|
26
|
-
import { useFloating, useHover, useInteractions, flip, safePolygon, autoUpdate, offset, useTransitionStyles, } from "@floating-ui/react";
|
|
27
|
-
export var UnstyledTooltip = function (props) {
|
|
28
|
-
var children = props.children, content = props.tooltipContent, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, _c = props.disableFlip, disableFlip = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(props, ["children", "tooltipContent", "placement", "style", "offset", "disableFlip", "disabled"]);
|
|
29
|
-
var _e = useState(false), open = _e[0], setOpen = _e[1];
|
|
30
|
-
var middleware = [offset(placementOffset)];
|
|
31
|
-
if (!disableFlip) {
|
|
32
|
-
middleware.push(flip());
|
|
33
|
-
}
|
|
34
|
-
var _f = useFloating({
|
|
35
|
-
open: open,
|
|
36
|
-
onOpenChange: setOpen,
|
|
37
|
-
middleware: middleware,
|
|
38
|
-
whileElementsMounted: autoUpdate,
|
|
39
|
-
placement: placement,
|
|
40
|
-
}), refs = _f.refs, floatingStyles = _f.floatingStyles, context = _f.context;
|
|
41
|
-
var hover = useHover(context, {
|
|
42
|
-
handleClose: safePolygon(),
|
|
43
|
-
mouseOnly: true,
|
|
44
|
-
});
|
|
45
|
-
var _g = useTransitionStyles(context, {
|
|
46
|
-
duration: 250, // default aui-transition value
|
|
47
|
-
}), isMounted = _g.isMounted, transitionStyles = _g.styles;
|
|
48
|
-
var _h = useInteractions([hover]), getReferenceProps = _h.getReferenceProps, getFloatingProps = _h.getFloatingProps;
|
|
49
|
-
if (disabled)
|
|
50
|
-
return children;
|
|
51
|
-
var _j = getFloatingProps(), onMouseEnter = _j.onMouseEnter, onMouseLeave = _j.onMouseLeave;
|
|
52
|
-
return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), isMounted && (_jsx(Box, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), transitionStyles), style) }, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest, { children: _jsx(_Fragment, { children: content }) })))] }));
|
|
53
|
-
};
|
|
54
|
-
export var Tooltip = function (_a) {
|
|
55
|
-
var vfx = _a.vfx, rest = __rest(_a, ["vfx"]);
|
|
56
|
-
return (_jsx(UnstyledTooltip, __assign({ vfx: __assign({ padding: "s", backgroundColor: "default", border: true, shadow: "floating", radius: "rounded", z: "floating" }, vfx) }, rest)));
|
|
57
|
-
};
|
|
58
|
-
export default Tooltip;
|
|
1
|
+
import{Fragment as h,jsx as s,jsxs as U}from"react/jsx-runtime";import{cloneElement as k,useState as z}from"react";import{Box as B}from"@adamjanicki/ui";import{useFloating as H,useHover as q,useInteractions as A,flip as D,safePolygon as G,autoUpdate as J,offset as K,useTransitionStyles as N}from"@floating-ui/react";var a=function(){return a=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++){n=arguments[r];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a.apply(this,arguments)},b=function(e,n){var r={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var o=0,t=Object.getOwnPropertySymbols(e);o<t.length;o++)n.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(r[t[o]]=e[t[o]]);return r},Q=function(e){var n=e.children,r=e.tooltipContent,t=e.placement,o=t===void 0?"bottom":t,_=e.style,i=e.offset,x=i===void 0?0:i,f=e.disableFlip,O=f===void 0?!1:f,d=e.disabled,j=d===void 0?!1:d,F=b(e,["children","tooltipContent","placement","style","offset","disableFlip","disabled"]),u=z(!1),M=u[0],P=u[1],c=[K(x)];O||c.push(D());var l=H({open:M,onOpenChange:P,middleware:c,whileElementsMounted:J,placement:o}),v=l.refs,w=l.floatingStyles,g=l.context,S=q(g,{handleClose:G(),mouseOnly:!0}),p=N(g,{duration:250}),E=p.isMounted,C=p.styles,m=A([S]),L=m.getReferenceProps,R=m.getFloatingProps;if(j)return n;var y=R(),T=y.onMouseEnter,I=y.onMouseLeave;return U(h,{children:[k(n,a({ref:v.setReference},L())),E&&s(B,a({ref:v.setFloating,style:a(a(a({},w),C),_)},{onMouseEnter:T,onMouseLeave:I},F,{children:s(h,{children:r})}))]})},V=function(e){var n=e.vfx,r=b(e,["vfx"]);return s(Q,a({vfx:a({padding:"s",backgroundColor:"default",border:!0,shadow:"floating",radius:"rounded",z:"floating"},n)},r))},$=V;export{V as Tooltip,Q as UnstyledTooltip,$ as default};
|
package/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export { Tooltip, UnstyledTooltip, Popover, UnstyledPopover };
|
|
1
|
+
export { default as Tooltip, UnstyledTooltip } from "./components/Tooltip";
|
|
2
|
+
export { default as Popover, UnstyledPopover } from "./components/Popover";
|
|
4
3
|
export { default as Autocomplete } from "./components/Autocomplete";
|
package/index.js
CHANGED
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import Tooltip, { UnstyledTooltip } from "./components/Tooltip";
|
|
3
|
-
import Popover, { UnstyledPopover } from "./components/Popover";
|
|
4
|
-
export { Tooltip, UnstyledTooltip, Popover, UnstyledPopover };
|
|
5
|
-
export { default as Autocomplete } from "./components/Autocomplete";
|
|
1
|
+
import{default as t,UnstyledTooltip as l}from"./components/Tooltip";import{default as r,UnstyledPopover as a}from"./components/Popover";import{default as d}from"./components/Autocomplete";export{d as Autocomplete,r as Popover,t as Tooltip,a as UnstyledPopover,l as UnstyledTooltip};
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adamjanicki/ui-extended",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.3",
|
|
4
4
|
"description": "More advanced UI components and hooks for React in TypeScript",
|
|
5
|
+
"type": "module",
|
|
5
6
|
"main": "./index.js",
|
|
7
|
+
"module": "./index.js",
|
|
6
8
|
"types": "./index.d.ts",
|
|
9
|
+
"sideEffects": false,
|
|
7
10
|
"author": "Adam Janicki",
|
|
8
11
|
"license": "MIT",
|
|
9
12
|
"repository": {
|
|
@@ -11,9 +14,9 @@
|
|
|
11
14
|
"url": "git+https://github.com/adamjanicki2/ui-extended.git"
|
|
12
15
|
},
|
|
13
16
|
"scripts": {
|
|
14
|
-
"clean": "
|
|
17
|
+
"clean": "python clean.py",
|
|
15
18
|
"lint": "eslint src --max-warnings=0",
|
|
16
|
-
"build": "npm run
|
|
19
|
+
"build": "npm run lint && python build.py",
|
|
17
20
|
"prepare": "npm run build",
|
|
18
21
|
"dryrun": "npm publish --dry-run"
|
|
19
22
|
},
|
|
@@ -22,12 +25,13 @@
|
|
|
22
25
|
"react-dom": ">=18"
|
|
23
26
|
},
|
|
24
27
|
"dependencies": {
|
|
25
|
-
"@adamjanicki/ui": "^1.
|
|
28
|
+
"@adamjanicki/ui": "^1.8.8",
|
|
26
29
|
"@floating-ui/react": "^0.26.17"
|
|
27
30
|
},
|
|
28
31
|
"devDependencies": {
|
|
29
32
|
"@types/react": "^19.1.9",
|
|
30
33
|
"@types/react-dom": "^19.1.7",
|
|
34
|
+
"esbuild": "^0.27.2",
|
|
31
35
|
"typescript": "^5.9.2"
|
|
32
36
|
}
|
|
33
37
|
}
|