@stack-spot/citric-react 0.1.1 → 0.2.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/citric.css +26 -0
- package/dist/components/Button.js +1 -1
- package/dist/components/Button.js.map +1 -1
- package/dist/components/IconBox.d.ts +5 -1
- package/dist/components/IconBox.d.ts.map +1 -1
- package/dist/components/IconBox.js +2 -2
- package/dist/components/IconBox.js.map +1 -1
- package/dist/components/Overlay/index.d.ts +2 -1
- package/dist/components/Overlay/index.d.ts.map +1 -1
- package/dist/components/Overlay/index.js.map +1 -1
- package/dist/components/Overlay/types.d.ts +3 -3
- package/dist/components/Overlay/types.d.ts.map +1 -1
- package/dist/components/Text.d.ts +1 -1
- package/dist/components/layout.d.ts +10 -10
- package/dist/components/layout.d.ts.map +1 -1
- package/dist/components/layout.js.map +1 -1
- package/dist/overlay.d.ts +3 -3
- package/dist/overlay.d.ts.map +1 -1
- package/dist/types.d.ts +32 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Button.tsx +1 -1
- package/src/components/IconBox.tsx +6 -1
- package/src/components/Overlay/index.tsx +2 -1
- package/src/components/Overlay/types.ts +3 -3
- package/src/components/layout.tsx +10 -10
- package/src/overlay.ts +3 -3
- package/src/types.ts +33 -44
package/dist/citric.css
CHANGED
|
@@ -1798,6 +1798,7 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
|
|
|
1798
1798
|
[data-citric="button"][data-citric="icon-box"] {
|
|
1799
1799
|
cursor: pointer;
|
|
1800
1800
|
text-decoration: none;
|
|
1801
|
+
position: relative;
|
|
1801
1802
|
&:disabled {
|
|
1802
1803
|
pointer-events: none;
|
|
1803
1804
|
opacity: 48%;
|
|
@@ -1805,6 +1806,31 @@ input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].c
|
|
|
1805
1806
|
&:hover, &:focus {
|
|
1806
1807
|
background-color: var(--bg-hover);
|
|
1807
1808
|
}
|
|
1809
|
+
|
|
1810
|
+
/* Feedback text on click */
|
|
1811
|
+
|
|
1812
|
+
&[data-feedback]:after {
|
|
1813
|
+
content: attr(data-feedback);
|
|
1814
|
+
font: var(--font-microtext1);
|
|
1815
|
+
color: var(--inverse-contrastText);
|
|
1816
|
+
position: absolute;
|
|
1817
|
+
top: 0;
|
|
1818
|
+
padding: 3px 6px;
|
|
1819
|
+
border: 1px solid var(--inverse-500);
|
|
1820
|
+
border-radius: 4px;
|
|
1821
|
+
background-color: var(--inverse-300);
|
|
1822
|
+
pointer-events: none;
|
|
1823
|
+
opacity: 0;
|
|
1824
|
+
}
|
|
1825
|
+
|
|
1826
|
+
&[data-feedback]:not(:active):after {
|
|
1827
|
+
transition: opacity 1s, top 1s;
|
|
1828
|
+
}
|
|
1829
|
+
|
|
1830
|
+
&[data-feedback]:active:after {
|
|
1831
|
+
opacity: 1;
|
|
1832
|
+
top: calc(100% + 10px);
|
|
1833
|
+
}
|
|
1808
1834
|
}
|
|
1809
1835
|
|
|
1810
1836
|
|
|
@@ -20,6 +20,6 @@ export const Button = ({ appearance, size, feedback, loading, disabled, onClick,
|
|
|
20
20
|
setWaiting(false);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
return (_jsxs(CitricComponent, { tag: "button", component: "button", className: listToClass([size, appearance, className]), "data-feedback": feedback, onClick: handleClick, "aria-busy": busy, disabled: disabled || busy, type: type, ...props, children: [busy ? _jsx("div", { children: children }) : children, busy && (_jsx("div", { className: "loader", children: _jsx(ProgressCircular, { size: "sm" }) }))] }));
|
|
23
|
+
return (_jsxs(CitricComponent, { tag: "button", component: "button", className: listToClass([size, appearance, className]), "data-feedback": feedback || undefined, onClick: handleClick, "aria-busy": busy, disabled: disabled || busy, type: type, ...props, children: [busy ? _jsx("div", { children: children }) : children, busy && (_jsx("div", { className: "loader", children: _jsx(ProgressCircular, { size: "sm" }) }))] }));
|
|
24
24
|
};
|
|
25
25
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA2CrD,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EAClI,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,CAAA;IAE/B,KAAK,UAAU,WAAW,CAAC,CAAkD;QAC3E,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAA;YACd,CAAC;YAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA2CrD,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EAClI,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,CAAA;IAE/B,KAAK,UAAU,WAAW,CAAC,CAAkD;QAC3E,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAA;YACd,CAAC;YAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,WAAW,eACT,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAC1B,IAAI,EAAE,IAAI,KACN,KAAK,aAER,IAAI,CAAC,CAAC,CAAC,wBAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,EACvC,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,gBAAgB,IAAC,IAAI,EAAC,IAAI,GAAG,GAC1B,CACP,IACe,CACnB,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -20,6 +20,10 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
20
20
|
* @default 'sm'
|
|
21
21
|
*/
|
|
22
22
|
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
23
|
+
/**
|
|
24
|
+
* Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
|
|
25
|
+
*/
|
|
26
|
+
feedback?: string;
|
|
23
27
|
/**
|
|
24
28
|
* Only valid if `tag` is "button" or "a".
|
|
25
29
|
*
|
|
@@ -33,7 +37,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
33
37
|
analytics?: boolean;
|
|
34
38
|
}
|
|
35
39
|
export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLExtension<T, BaseIconBoxProps<T, G>>;
|
|
36
|
-
export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>): import("react/jsx-runtime").JSX.Element;
|
|
37
41
|
/**
|
|
38
42
|
* Shortcut to <IconBox tag="button" />
|
|
39
43
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIlE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG3E,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACrI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,aAAa,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAE9G,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EACjF,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"IconBox.d.ts","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIlE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG3E,KAAK,UAAU,GAAG,GAAG,GAAG,QAAQ,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,CAAE,SAAQ,YAAY,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,gBAAgB;IACrI;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,SAAS,IAAI,aAAa,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAE9G,wBAAgB,OAAO,CAAC,CAAC,SAAS,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,SAAS,GAAG,SAAS,EACjF,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,2CAoBzI;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAExG;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,2CAEjG"}
|
|
@@ -3,7 +3,7 @@ import { listToClass } from '@stack-spot/portal-theme';
|
|
|
3
3
|
import { useCallback } from 'react';
|
|
4
4
|
import { useCitricController } from '../context/hooks.js';
|
|
5
5
|
import { CitricComponent } from './CitricComponent.js';
|
|
6
|
-
export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, ...props }) {
|
|
6
|
+
export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }) {
|
|
7
7
|
const citric = useCitricController();
|
|
8
8
|
const handleClick = useCallback((e) => {
|
|
9
9
|
onClick?.(e);
|
|
@@ -12,7 +12,7 @@ export function IconBox({ group, icon, tag, colorScheme, colorPalette, appearanc
|
|
|
12
12
|
else if (tag === 'a')
|
|
13
13
|
citric?.onClickLink?.(e, analytics ?? false);
|
|
14
14
|
}, [tag]);
|
|
15
|
-
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), colorScheme: colorScheme, colorPalette: colorPalette, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
15
|
+
return _jsx(CitricComponent, { tag: (tag || 'i'), component: "icon-box", className: listToClass(['citric-icon', group || 'outline', icon, appearance, size, className]), colorScheme: colorScheme, colorPalette: colorPalette, "data-feedback": feedback || undefined, onClick: ['button', 'a'].includes(tag ?? '') ? handleClick : onClick, ...props });
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* Shortcut to <IconBox tag="button" />
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"IconBox.js","sourceRoot":"","sources":["../../src/components/IconBox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0CnD,MAAM,UAAU,OAAO,CACrB,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAsB;IAExI,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAwB,EAAE,EAAE;QAC3D,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QACZ,IAAI,GAAG,KAAK,QAAQ;YAAE,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;aAC/D,IAAI,GAAG,KAAK,GAAG;YAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;IACpE,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,OAAO,KAAC,eAAe,IACrB,GAAG,EAAE,CAAC,GAAG,IAAI,GAAG,CAAQ,EACxB,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,aAAa,EAAE,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EAC9F,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,mBACX,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,KAChE,KAAK,GACT,CAAA;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAkC,KAA6C;IACvG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,CAAA;AAC3E,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAkC,KAAwC;IAChG,OAAO,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAA;AACxC,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { HTMLTag } from '../../types.js';
|
|
1
2
|
import { OverlayProps } from './types.js';
|
|
2
3
|
/**
|
|
3
4
|
* These todos are in order of priority.
|
|
@@ -10,5 +11,5 @@ import { OverlayProps } from './types.js';
|
|
|
10
11
|
* hidden by the scroll.
|
|
11
12
|
* TODO: use React Portal to implement overlays. The current implementation will lose every React context in the tree.
|
|
12
13
|
*/
|
|
13
|
-
export declare function Overlay<T extends keyof
|
|
14
|
+
export declare function Overlay<T extends keyof HTMLTag>({ tag, children, content, position, triggerOn, attributes, onRenderChild, autoFocusBehavior, ...props }: OverlayProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAGrC,OAAO,EAAqB,YAAY,EAAE,MAAM,SAAS,CAAA;AAEzD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,OAAO,EAAE,EAC/C,GAAG,EACH,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAmB,EACnB,UAAU,EACV,aAAa,EACb,iBAA8B,EAC9B,GAAG,KAAK,EACT,EAAE,YAAY,CAAC,CAAC,CAAC,2CA6GjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Overlay/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Overlay/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { OverlayOptions } from '../../overlay.js';
|
|
2
|
-
import { HTMLExtension } from '../../types.js';
|
|
2
|
+
import { HTMLExtension, HTMLTag } from '../../types.js';
|
|
3
3
|
export type TriggerOn = 'hover' | 'click';
|
|
4
|
-
export interface BaseOverlayProps<T extends keyof
|
|
4
|
+
export interface BaseOverlayProps<T extends keyof HTMLTag> extends Omit<OverlayOptions<T>, 'target'> {
|
|
5
5
|
/**
|
|
6
6
|
* When should the overlay element be created? When the child is clicked or when the child is hovered?
|
|
7
7
|
*
|
|
@@ -60,7 +60,7 @@ export interface BaseOverlayProps<T extends keyof React.JSX.IntrinsicElements> e
|
|
|
60
60
|
*/
|
|
61
61
|
onRenderChild?: (element: HTMLElement) => void;
|
|
62
62
|
}
|
|
63
|
-
export type OverlayProps<T extends keyof
|
|
63
|
+
export type OverlayProps<T extends keyof HTMLTag> = HTMLExtension<'div', BaseOverlayProps<T>, 'children' | 'content'>;
|
|
64
64
|
export interface OverlayController {
|
|
65
65
|
close: () => Promise<void>;
|
|
66
66
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAEpD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;AAEzC,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAClG;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B;;;;;;;;;;;;;;;;;;OAkBG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,IAC9C,aAAa,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAEnE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B"}
|
|
@@ -22,6 +22,6 @@ export type TextProps<T extends SupportedTags> = HTMLExtension<T, BaseTextProps<
|
|
|
22
22
|
export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
|
|
23
23
|
className: string;
|
|
24
24
|
style: import("react").CSSProperties | undefined;
|
|
25
|
-
} & Omit<TextProps<T>, "
|
|
25
|
+
} & Omit<TextProps<T>, "color" | "style" | "appearance" | "tag" | "className" | "children" | "showMargins">, HTMLSpanElement>;
|
|
26
26
|
export {};
|
|
27
27
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { HTMLExtension, WithStyleShortcuts } from '../types.js';
|
|
1
|
+
import { HTMLExtension, HTMLTag, WithStyleShortcuts } from '../types.js';
|
|
2
2
|
export declare const layout: {
|
|
3
3
|
center: string;
|
|
4
4
|
row: string;
|
|
5
5
|
column: string;
|
|
6
6
|
};
|
|
7
|
-
export interface BaseLayoutProps<T extends keyof
|
|
7
|
+
export interface BaseLayoutProps<T extends keyof HTMLTag> extends WithStyleShortcuts {
|
|
8
8
|
/**
|
|
9
9
|
* HTML tag to render.
|
|
10
10
|
*
|
|
@@ -12,7 +12,7 @@ export interface BaseLayoutProps<T extends keyof React.JSX.IntrinsicElements> ex
|
|
|
12
12
|
*/
|
|
13
13
|
tag?: T;
|
|
14
14
|
}
|
|
15
|
-
export interface BaseRowProps<T extends keyof
|
|
15
|
+
export interface BaseRowProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
|
|
16
16
|
/**
|
|
17
17
|
* Whether or not to center items horizontally.
|
|
18
18
|
*
|
|
@@ -20,7 +20,7 @@ export interface BaseRowProps<T extends keyof React.JSX.IntrinsicElements> exten
|
|
|
20
20
|
*/
|
|
21
21
|
center?: boolean;
|
|
22
22
|
}
|
|
23
|
-
export interface BaseColumnProps<T extends keyof
|
|
23
|
+
export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
|
|
24
24
|
/**
|
|
25
25
|
* Whether or not to center items vertically.
|
|
26
26
|
*
|
|
@@ -28,18 +28,18 @@ export interface BaseColumnProps<T extends keyof React.JSX.IntrinsicElements> ex
|
|
|
28
28
|
*/
|
|
29
29
|
center?: boolean;
|
|
30
30
|
}
|
|
31
|
-
export type CenterProps<T extends keyof
|
|
32
|
-
export type RowProps<T extends keyof
|
|
33
|
-
export type ColumnProps<T extends keyof
|
|
34
|
-
export declare function Center<T extends keyof
|
|
31
|
+
export type CenterProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseLayoutProps<T>>;
|
|
32
|
+
export type RowProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseRowProps<T>>;
|
|
33
|
+
export type ColumnProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseColumnProps<T>>;
|
|
34
|
+
export declare function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
|
|
35
35
|
style: Partial<import("react").CSSProperties>;
|
|
36
36
|
className: string;
|
|
37
37
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
38
|
-
export declare function Row<T extends keyof
|
|
38
|
+
export declare function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
|
|
39
39
|
style: Partial<import("react").CSSProperties>;
|
|
40
40
|
className: string;
|
|
41
41
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
42
|
-
export declare function Column<T extends keyof
|
|
42
|
+
export declare function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
|
|
43
43
|
style: Partial<import("react").CSSProperties>;
|
|
44
44
|
className: string;
|
|
45
45
|
}, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGrE,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,kBAAkB;IAClF;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC/E;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,OAAO,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,aAAa,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;AACvF,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;AACjF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,IAAI,aAAa,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;AAEvF,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAEnG;AAED,wBAAgB,GAAG,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAErG;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE3G"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD,MAAM,UAAU,MAAM,
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACjB,CAAA;AAiCD,MAAM,UAAU,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAClG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC9G,CAAC;AAED,MAAM,UAAU,GAAG,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAe;IACpG,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAC5I,CAAC;AAED,MAAM,UAAU,MAAM,CAAkC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAkB;IAC1G,OAAO,aAAa,CAAC,GAAG,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;AAClI,CAAC"}
|
package/dist/overlay.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { WithDataAttributes } from './types.js';
|
|
1
|
+
import { HTMLTag, WithDataAttributes } from './types.js';
|
|
2
2
|
export type RelativePosition = 'top' | 'bottom' | 'left' | 'right';
|
|
3
|
-
export interface OverlayOptions<T extends keyof
|
|
3
|
+
export interface OverlayOptions<T extends keyof HTMLTag> {
|
|
4
4
|
/**
|
|
5
5
|
* The tag to render when creating the overlay element.
|
|
6
6
|
*
|
|
@@ -68,7 +68,7 @@ export interface OverlayOptions<T extends keyof React.JSX.IntrinsicElements> {
|
|
|
68
68
|
* @param options {@link OverlayOptions}.
|
|
69
69
|
* @returns an object with two keys: "overlay" (the HTML Element created) and "hide" (a function to remove the element from the document).
|
|
70
70
|
*/
|
|
71
|
-
export declare function showOverlay<T extends keyof
|
|
71
|
+
export declare function showOverlay<T extends keyof HTMLTag = 'div'>({ tag, content, target, reference, position, attributes }: OverlayOptions<T>): {
|
|
72
72
|
/**
|
|
73
73
|
* The overlay element created.
|
|
74
74
|
*/
|
package/dist/overlay.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGrD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAElE,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,OAAO;IACrD;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;;OAKG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,MAAM,EAAE,KAAK,GAAG,WAAW,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrD;;OAEG;IACH,UAAU,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,kBAAkB,GAAG;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAClF;AAqJD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,OAAO,GAAG,KAAK,EACzD,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,SAAqB,EAAE,QAAgB,EAAE,UAAU,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;IA+B9F;;OAEG;;IAEH;;;OAGG;;;EAgBN"}
|
package/dist/types.d.ts
CHANGED
|
@@ -13,7 +13,38 @@ export type WithDataAttributes = {
|
|
|
13
13
|
[key: `data-${string}`]: string | undefined;
|
|
14
14
|
};
|
|
15
15
|
export type TextAppearance = 'body1' | 'body2' | 'code1' | 'code2' | 'display1' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'microtext1' | 'overheader1' | 'overheader2' | 'subtitle1' | 'subtitle2' | 'subtitle3' | 'subtitle4';
|
|
16
|
-
export
|
|
16
|
+
export interface HTMLTag {
|
|
17
|
+
a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
|
18
|
+
blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>;
|
|
19
|
+
button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
|
|
20
|
+
div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
21
|
+
form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
|
|
22
|
+
h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
23
|
+
h2: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
24
|
+
h3: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
25
|
+
h4: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
26
|
+
h5: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
27
|
+
h6: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
|
|
28
|
+
hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>;
|
|
29
|
+
i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
30
|
+
image: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
|
|
31
|
+
input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
32
|
+
label: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
|
|
33
|
+
li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
|
|
34
|
+
nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
35
|
+
p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
|
|
36
|
+
pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>;
|
|
37
|
+
select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
|
|
38
|
+
small: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
39
|
+
span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
|
|
40
|
+
table: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>;
|
|
41
|
+
td: React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
|
|
42
|
+
th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>;
|
|
43
|
+
tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>;
|
|
44
|
+
textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
|
|
45
|
+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
|
|
46
|
+
}
|
|
47
|
+
export type HTMLExtension<K extends keyof HTMLTag, Props, Omitted extends string = ''> = (Omitted extends '' ? HTMLTag[K] : Omit<HTMLTag[K], Omitted>) & Props;
|
|
17
48
|
export interface WithStyleShortcuts {
|
|
18
49
|
/**
|
|
19
50
|
* Sets a theme color for the background.
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAEhF,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GACtI,aAAa,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAEhF,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GACtI,aAAa,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAA;AAGvF,MAAM,WAAW,OAAO;IACtB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,CAAC;IAC7F,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,wBAAwB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IACxG,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,CAAC;IAClG,GAAG,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;IACnF,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAC1F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC;IAChF,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;IAC3E,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAC5F,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAC9F,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAC9F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC;IAClF,GAAG,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;IAC7E,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC,CAAC;IAC7F,GAAG,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;IACnF,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,CAAC;IAClG,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;IAC/E,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC;IACtF,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAC9F,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC,CAAC;IAChG,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC,CAAC;IAChG,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC1G,EAAE,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC;CACvF;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,OAAO,EAAE,KAAK,EAAE,OAAO,SAAS,MAAM,GAAG,EAAE,IACnF,CAAC,OAAO,SAAS,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;IACvC;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAC/C;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzF;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvF;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,YAAY,CAAC;IACjD;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC"}
|
package/package.json
CHANGED
|
@@ -70,7 +70,7 @@ export const Button = (
|
|
|
70
70
|
tag="button"
|
|
71
71
|
component="button"
|
|
72
72
|
className={listToClass([size, appearance, className])}
|
|
73
|
-
data-feedback={feedback}
|
|
73
|
+
data-feedback={feedback || undefined}
|
|
74
74
|
onClick={handleClick}
|
|
75
75
|
aria-busy={busy}
|
|
76
76
|
disabled={disabled || busy}
|
|
@@ -26,6 +26,10 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
26
26
|
* @default 'sm'
|
|
27
27
|
*/
|
|
28
28
|
size?: 'xs' | 'sm' | 'md' | 'lg',
|
|
29
|
+
/**
|
|
30
|
+
* Animated text to show on when the button/link is clicked. This is only valid for buttons and anchors.
|
|
31
|
+
*/
|
|
32
|
+
feedback?: string,
|
|
29
33
|
/**
|
|
30
34
|
* Only valid if `tag` is "button" or "a".
|
|
31
35
|
*
|
|
@@ -42,7 +46,7 @@ export interface BaseIconBoxProps<T extends IconBoxTag, G extends IconGroup> ext
|
|
|
42
46
|
export type IconBoxProps<T extends IconBoxTag, G extends IconGroup> = HTMLExtension<T, BaseIconBoxProps<T, G>>
|
|
43
47
|
|
|
44
48
|
export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outline'>(
|
|
45
|
-
{ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, ...props }: IconBoxProps<T, G>,
|
|
49
|
+
{ group, icon, tag, colorScheme, colorPalette, appearance, size, className, analytics, onClick, feedback, ...props }: IconBoxProps<T, G>,
|
|
46
50
|
) {
|
|
47
51
|
const citric = useCitricController()
|
|
48
52
|
|
|
@@ -58,6 +62,7 @@ export function IconBox<T extends IconBoxTag = 'i', G extends IconGroup = 'outli
|
|
|
58
62
|
className={listToClass(['citric-icon', group || 'outline', icon, appearance, size, className])}
|
|
59
63
|
colorScheme={colorScheme}
|
|
60
64
|
colorPalette={colorPalette}
|
|
65
|
+
data-feedback={feedback || undefined}
|
|
61
66
|
onClick={['button', 'a'].includes(tag ?? '') ? handleClick : onClick}
|
|
62
67
|
{...props}
|
|
63
68
|
/>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react'
|
|
2
2
|
import { showOverlay } from '../../overlay'
|
|
3
|
+
import { HTMLTag } from '../../types'
|
|
3
4
|
import { focusFirstChild } from '../../utils/acessibility'
|
|
4
5
|
import { OverlayProvider } from './context'
|
|
5
6
|
import { OverlayController, OverlayProps } from './types'
|
|
@@ -15,7 +16,7 @@ import { OverlayController, OverlayProps } from './types'
|
|
|
15
16
|
* hidden by the scroll.
|
|
16
17
|
* TODO: use React Portal to implement overlays. The current implementation will lose every React context in the tree.
|
|
17
18
|
*/
|
|
18
|
-
export function Overlay<T extends keyof
|
|
19
|
+
export function Overlay<T extends keyof HTMLTag>({
|
|
19
20
|
tag,
|
|
20
21
|
children,
|
|
21
22
|
content,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { OverlayOptions } from '../../overlay'
|
|
2
|
-
import { HTMLExtension } from '../../types'
|
|
2
|
+
import { HTMLExtension, HTMLTag } from '../../types'
|
|
3
3
|
|
|
4
4
|
export type TriggerOn = 'hover' | 'click'
|
|
5
5
|
|
|
6
|
-
export interface BaseOverlayProps<T extends keyof
|
|
6
|
+
export interface BaseOverlayProps<T extends keyof HTMLTag> extends Omit<OverlayOptions<T>, 'target'> {
|
|
7
7
|
/**
|
|
8
8
|
* When should the overlay element be created? When the child is clicked or when the child is hovered?
|
|
9
9
|
*
|
|
@@ -63,7 +63,7 @@ export interface BaseOverlayProps<T extends keyof React.JSX.IntrinsicElements> e
|
|
|
63
63
|
onRenderChild?: (element: HTMLElement) => void,
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
-
export type OverlayProps<T extends keyof
|
|
66
|
+
export type OverlayProps<T extends keyof HTMLTag> =
|
|
67
67
|
HTMLExtension<'div', BaseOverlayProps<T>, 'children' | 'content'>
|
|
68
68
|
|
|
69
69
|
export interface OverlayController {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
2
|
import { createElement } from 'react'
|
|
3
|
-
import { HTMLExtension, WithStyleShortcuts } from '../types'
|
|
3
|
+
import { HTMLExtension, HTMLTag, WithStyleShortcuts } from '../types'
|
|
4
4
|
import { applyStyles } from '../utils/css'
|
|
5
5
|
|
|
6
6
|
export const layout = {
|
|
@@ -9,7 +9,7 @@ export const layout = {
|
|
|
9
9
|
column: 'column',
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
export interface BaseLayoutProps<T extends keyof
|
|
12
|
+
export interface BaseLayoutProps<T extends keyof HTMLTag> extends WithStyleShortcuts {
|
|
13
13
|
/**
|
|
14
14
|
* HTML tag to render.
|
|
15
15
|
*
|
|
@@ -18,7 +18,7 @@ export interface BaseLayoutProps<T extends keyof React.JSX.IntrinsicElements> ex
|
|
|
18
18
|
tag?: T,
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export interface BaseRowProps<T extends keyof
|
|
21
|
+
export interface BaseRowProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
|
|
22
22
|
/**
|
|
23
23
|
* Whether or not to center items horizontally.
|
|
24
24
|
*
|
|
@@ -27,7 +27,7 @@ export interface BaseRowProps<T extends keyof React.JSX.IntrinsicElements> exten
|
|
|
27
27
|
center?: boolean,
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
export interface BaseColumnProps<T extends keyof
|
|
30
|
+
export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
|
|
31
31
|
/**
|
|
32
32
|
* Whether or not to center items vertically.
|
|
33
33
|
*
|
|
@@ -36,18 +36,18 @@ export interface BaseColumnProps<T extends keyof React.JSX.IntrinsicElements> ex
|
|
|
36
36
|
center?: boolean,
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
export type CenterProps<T extends keyof
|
|
40
|
-
export type RowProps<T extends keyof
|
|
41
|
-
export type ColumnProps<T extends keyof
|
|
39
|
+
export type CenterProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseLayoutProps<T>>
|
|
40
|
+
export type RowProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseRowProps<T>>
|
|
41
|
+
export type ColumnProps<T extends keyof HTMLTag> = HTMLExtension<T, BaseColumnProps<T>>
|
|
42
42
|
|
|
43
|
-
export function Center<T extends keyof
|
|
43
|
+
export function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
|
|
44
44
|
return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
export function Row<T extends keyof
|
|
47
|
+
export function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
|
|
48
48
|
return createElement(tag || 'div', { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) })
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
export function Column<T extends keyof
|
|
51
|
+
export function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
|
|
52
52
|
return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) })
|
|
53
53
|
}
|
package/src/overlay.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { createRoot } from 'react-dom/client'
|
|
2
|
-
import { WithDataAttributes } from './types'
|
|
2
|
+
import { HTMLTag, WithDataAttributes } from './types'
|
|
3
3
|
import { styleObjectToCssString } from './utils/css'
|
|
4
4
|
|
|
5
5
|
export type RelativePosition = 'top' | 'bottom' | 'left' | 'right'
|
|
6
6
|
|
|
7
|
-
export interface OverlayOptions<T extends keyof
|
|
7
|
+
export interface OverlayOptions<T extends keyof HTMLTag> {
|
|
8
8
|
/**
|
|
9
9
|
* The tag to render when creating the overlay element.
|
|
10
10
|
*
|
|
@@ -218,7 +218,7 @@ function setElementAttributes(element: HTMLElement, attributes: Record<string, a
|
|
|
218
218
|
* @param options {@link OverlayOptions}.
|
|
219
219
|
* @returns an object with two keys: "overlay" (the HTML Element created) and "hide" (a function to remove the element from the document).
|
|
220
220
|
*/
|
|
221
|
-
export function showOverlay<T extends keyof
|
|
221
|
+
export function showOverlay<T extends keyof HTMLTag = 'div'>(
|
|
222
222
|
{ tag, content, target, reference = 'element', position = 'top', attributes }: OverlayOptions<T>,
|
|
223
223
|
) {
|
|
224
224
|
const overlay = document.createElement(tag || 'div')
|
package/src/types.ts
CHANGED
|
@@ -19,51 +19,40 @@ export type TextAppearance = 'body1' | 'body2' | 'code1' | 'code2' | 'display1'
|
|
|
19
19
|
'overheader1' | 'overheader2' | 'subtitle1' | 'subtitle2' | 'subtitle3' | 'subtitle4'
|
|
20
20
|
|
|
21
21
|
// increase this list as needed. Generic uses of `JSX.IntrinsicElements` may lead to expensive operations.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
// export type HTMLExtension<K extends keyof HTMLTag, Props, Omitted extends string = ''> =
|
|
55
|
-
// (Omitted extends ''
|
|
56
|
-
// ? React.DetailedHTMLProps<React.HTMLAttributes<HTMLTag[K]>, HTMLTag[K]>
|
|
57
|
-
// : Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTag[K]>, HTMLTag[K]>, Omitted>
|
|
58
|
-
// ) & Props
|
|
59
|
-
|
|
60
|
-
|
|
22
|
+
export interface HTMLTag {
|
|
23
|
+
a: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
|
|
24
|
+
blockquote: React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>,
|
|
25
|
+
button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
|
|
26
|
+
div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
27
|
+
form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>,
|
|
28
|
+
h1: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
29
|
+
h2: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
30
|
+
h3: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
31
|
+
h4: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
32
|
+
h5: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
33
|
+
h6: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>,
|
|
34
|
+
hr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
|
|
35
|
+
i: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
|
|
36
|
+
image: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
|
|
37
|
+
input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
|
|
38
|
+
label: React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
|
|
39
|
+
li: React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>,
|
|
40
|
+
nav: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
|
|
41
|
+
p: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>,
|
|
42
|
+
pre: React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement>,
|
|
43
|
+
select: React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
|
|
44
|
+
small: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
|
|
45
|
+
span: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
|
46
|
+
table: React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>,
|
|
47
|
+
td: React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>,
|
|
48
|
+
th: React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement>,
|
|
49
|
+
tr: React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>,
|
|
50
|
+
textarea: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>,
|
|
51
|
+
ul: React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>,
|
|
52
|
+
}
|
|
61
53
|
|
|
62
|
-
export type HTMLExtension<K extends keyof
|
|
63
|
-
(Omitted extends ''
|
|
64
|
-
? React.JSX.IntrinsicElements[K]
|
|
65
|
-
: Omit<React.JSX.IntrinsicElements[K], Omitted>
|
|
66
|
-
) & Props
|
|
54
|
+
export type HTMLExtension<K extends keyof HTMLTag, Props, Omitted extends string = ''> =
|
|
55
|
+
(Omitted extends '' ? HTMLTag[K] : Omit<HTMLTag[K], Omitted>) & Props
|
|
67
56
|
|
|
68
57
|
export interface WithStyleShortcuts {
|
|
69
58
|
/**
|