@atom-learning/components 6.16.0-beta.2 → 6.16.0-beta.4
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/navigation/NavigationMenu.d.ts +2 -0
- package/dist/components/navigation/NavigationMenuDropdownItem.d.ts +1 -0
- package/dist/components/navigation/NavigationMenuLink.d.ts +1 -0
- package/dist/components/navigation/NavigationMenuLink.js +22 -11
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/router-provider/RouterProvider.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +21 -11
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -18,6 +18,7 @@ export declare const NavigationMenu: {
|
|
|
18
18
|
} & {
|
|
19
19
|
as?: React.ElementType;
|
|
20
20
|
}>>["elementType"];
|
|
21
|
+
reloadDocument?: boolean;
|
|
21
22
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
22
23
|
Dropdown: {
|
|
23
24
|
({ children, id, ...props }: {
|
|
@@ -44,6 +45,7 @@ export declare const NavigationMenu: {
|
|
|
44
45
|
} & {
|
|
45
46
|
as?: React.ElementType;
|
|
46
47
|
}>>["elementType"];
|
|
48
|
+
reloadDocument?: boolean;
|
|
47
49
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
48
50
|
DropdownItemTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
49
51
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
@@ -10,6 +10,7 @@ export declare const NavigationMenuDropdownItem: React.ForwardRefExoticComponent
|
|
|
10
10
|
} & {
|
|
11
11
|
as?: React.ElementType;
|
|
12
12
|
}>>["elementType"];
|
|
13
|
+
reloadDocument?: boolean;
|
|
13
14
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
14
15
|
export declare const NavigationMenuDropdownItemTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
15
16
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
@@ -12,5 +12,6 @@ export declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<Om
|
|
|
12
12
|
}, "elementType"> & {
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
variant?: React.ComponentProps<typeof StyledLink>["elementType"];
|
|
15
|
+
reloadDocument?: boolean;
|
|
15
16
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
16
17
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
3
|
+
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
3
4
|
import { navigationMenuBaseItemStyles } from "./NavigationMenu.styles.js";
|
|
4
5
|
import React from "react";
|
|
5
6
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
@@ -46,17 +47,27 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
|
|
|
46
47
|
]
|
|
47
48
|
} }
|
|
48
49
|
});
|
|
49
|
-
var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, ...props }, forwardedRef) =>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
50
|
+
var NavigationMenuLink = React.forwardRef(({ children, href, disabled, className, variant = "link", ref: _ref, reloadDocument, ...props }, forwardedRef) => {
|
|
51
|
+
const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
|
|
52
|
+
return /* @__PURE__ */ React.createElement(ListItem, null, disabled ? /* @__PURE__ */ React.createElement(DisabledButton, {
|
|
53
|
+
disabled: true,
|
|
54
|
+
className
|
|
55
|
+
}, children) : RouterLink ? /* @__PURE__ */ React.createElement(StyledLink, {
|
|
56
|
+
href,
|
|
57
|
+
ref: forwardedRef,
|
|
58
|
+
elementType: variant,
|
|
59
|
+
className,
|
|
60
|
+
asChild: true,
|
|
61
|
+
...props
|
|
62
|
+
}, /* @__PURE__ */ React.createElement(RouterLink, { href }, children)) : /* @__PURE__ */ React.createElement(StyledLink, {
|
|
63
|
+
href,
|
|
64
|
+
ref: forwardedRef,
|
|
65
|
+
elementType: variant,
|
|
66
|
+
className,
|
|
67
|
+
...getExternalAnchorProps(href),
|
|
68
|
+
...props
|
|
69
|
+
}, children));
|
|
70
|
+
});
|
|
60
71
|
NavigationMenuLink.displayName = "NavigationMenuLink";
|
|
61
72
|
//#endregion
|
|
62
73
|
export { NavigationMenuLink };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n base: [\n ...navigationMenuBaseItemStyles,\n 'disabled:bg-none',\n 'disabled:cursor-default',\n 'disabled:opacity-30',\n 'disabled:text-text'\n ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n base: [\n ...navigationMenuBaseItemStyles,\n 'block',\n 'no-underline',\n 'leading-none'\n ],\n variants: {\n elementType: {\n dropdownItem: [\n 'data-active:bg-background-selected',\n 'data-active:text-text-selected',\n 'data-active:hover:bg-background-selected-hover',\n 'data-active:hover:text-text-selected-hover',\n 'data-active:active:bg-background-selected-pressed',\n 'data-active:active:text-text-selected-pressed',\n 'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n 'data-active:focus-visible:text-text-selected-focus'\n ],\n link: [\n 'data-active:font-semibold',\n 'data-active:text-item-(--background-selected)',\n 'data-active:after:-translate-x-1/2',\n 'data-active:after:absolute',\n 'data-active:after:bg-item-(--background-selected)',\n 'data-active:after:block',\n 'data-active:after:bottom-0',\n 'data-active:after:h-0.5',\n 'data-active:after:left-1/2',\n 'data-active:after:rounded-md',\n 'data-active:after:translate-y-0',\n 'data-active:after:w-6'\n ]\n }\n }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n HTMLAnchorElement,\n Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n disabled?: boolean\n variant?: React.ComponentProps<typeof StyledLink>['elementType']\n }\n>(\n (\n {\n children,\n href,\n disabled,\n className,\n variant = 'link',\n ref: _ref,\n ...props\n },\n forwardedRef\n ) => (\n <ListItem>\n
|
|
1
|
+
{"version":3,"file":"NavigationMenuLink.js","names":[],"sources":["../../../src/components/navigation/NavigationMenuLink.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { navigationMenuBaseItemStyles } from './NavigationMenu.styles'\n\nconst DisabledButton = styled('button', {\n base: [\n ...navigationMenuBaseItemStyles,\n 'disabled:bg-none',\n 'disabled:cursor-default',\n 'disabled:opacity-30',\n 'disabled:text-text'\n ]\n})\n\nconst ListItem = NavigationMenuPrimitive.Item\n\nconst StyledLink = styled(NavigationMenuPrimitive.Link, {\n base: [\n ...navigationMenuBaseItemStyles,\n 'block',\n 'no-underline',\n 'leading-none'\n ],\n variants: {\n elementType: {\n dropdownItem: [\n 'data-active:bg-background-selected',\n 'data-active:text-text-selected',\n 'data-active:hover:bg-background-selected-hover',\n 'data-active:hover:text-text-selected-hover',\n 'data-active:active:bg-background-selected-pressed',\n 'data-active:active:text-text-selected-pressed',\n 'data-active:focus-visible:shadow-[0_0_0_2px_var(--color-primary-800)]',\n 'data-active:focus-visible:text-text-selected-focus'\n ],\n link: [\n 'data-active:font-semibold',\n 'data-active:text-item-(--background-selected)',\n 'data-active:after:-translate-x-1/2',\n 'data-active:after:absolute',\n 'data-active:after:bg-item-(--background-selected)',\n 'data-active:after:block',\n 'data-active:after:bottom-0',\n 'data-active:after:h-0.5',\n 'data-active:after:left-1/2',\n 'data-active:after:rounded-md',\n 'data-active:after:translate-y-0',\n 'data-active:after:w-6'\n ]\n }\n }\n})\n\nexport const NavigationMenuLink = React.forwardRef<\n HTMLAnchorElement,\n Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n disabled?: boolean\n variant?: React.ComponentProps<typeof StyledLink>['elementType']\n reloadDocument?: boolean\n }\n>(\n (\n {\n children,\n href,\n disabled,\n className,\n variant = 'link',\n ref: _ref,\n reloadDocument,\n ...props\n },\n forwardedRef\n ) => {\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n const RouterLink = routerLinkProps.as\n\n return (\n <ListItem>\n {disabled ? (\n <DisabledButton disabled className={className}>\n {children}\n </DisabledButton>\n ) : RouterLink ? (\n <StyledLink\n href={href}\n ref={forwardedRef as any}\n elementType={variant}\n className={className}\n asChild\n {...props}\n >\n <RouterLink href={href}>{children}</RouterLink>\n </StyledLink>\n ) : (\n <StyledLink\n href={href}\n ref={forwardedRef as any}\n elementType={variant}\n className={className}\n {...getExternalAnchorProps(href)}\n {...props}\n >\n {children}\n </StyledLink>\n )}\n </ListItem>\n )\n }\n)\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n"],"mappings":";;;;;;;AASA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;CACD,EACF,CAAC;AAEF,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACD;CACD,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,EACF;CACF,CAAC;AAEF,IAAa,qBAAqB,MAAM,YASpC,EACE,UACA,MACA,UACA,WACA,UAAU,QACV,KAAK,MACL,gBACA,GAAG,SAEL,iBACG;CAEH,MAAM,aADkB,mBAAmB,MAAM,EAAE,gBAAgB,CAAC,CACjC;AAEnC,QACE,sBAAA,cAAC,UAAA,MACE,WACC,sBAAA,cAAC,gBAAD;EAAgB,UAAA;EAAoB;EAEnB,EADd,SACc,GACf,aACF,sBAAA,cAAC,YAAD;EACQ;EACN,KAAK;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;EAGO,EADX,sBAAA,cAAC,YAAD,EAAkB,MAA6B,EAAtB,SAAsB,CACpC,GAEb,sBAAA,cAAC,YAAD;EACQ;EACN,KAAK;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,KAAK;EAChC,GAAI;EAGO,EADV,SACU,CAEN;EAGhB;AAED,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouterProvider.js","names":[],"sources":["../../../src/components/router-provider/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype LinkComponent = React.ComponentType<\n React.AnchorHTMLAttributes<HTMLAnchorElement>\n>\n\ntype RouterContextValue = {\n link?: LinkComponent\n}\n\nconst RouterContext = React.createContext<RouterContextValue>({})\n\ntype RouterProviderProps = {\n link: LinkComponent\n children: React.ReactNode\n}\n\nexport const RouterProvider = ({ link, children }: RouterProviderProps) => {\n const value = React.useMemo<RouterContextValue>(() => ({ link }), [link])\n return <RouterContext.Provider value={value}>{children}</RouterContext.Provider>\n}\n\nconst isAbsoluteUrl = (url?: string) => /^https?:\\/\\//.test(url || '')\n\nconst EMPTY: { as?: LinkComponent } = {}\n\nexport const useRouterLinkProps = (\n href?: string,\n { reloadDocument }: { reloadDocument?: boolean } = {}\n): { as?: LinkComponent } => {\n const { link } = React.useContext(RouterContext)\n\n if (!link || !href || isAbsoluteUrl(href) || reloadDocument) {\n return EMPTY\n }\n\n return { as: link }\n}\n\nRouterProvider.displayName = 'RouterProvider'\n"],"mappings":";;AAUA,IAAM,gBAAgB,QAAM,cAAkC,EAAE,CAAC;AAOjE,IAAa,kBAAkB,EAAE,MAAM,eAAoC;CACzE,MAAM,QAAQ,QAAM,eAAmC,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;AACzE,
|
|
1
|
+
{"version":3,"file":"RouterProvider.js","names":[],"sources":["../../../src/components/router-provider/RouterProvider.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype LinkComponent = React.ComponentType<\n React.AnchorHTMLAttributes<HTMLAnchorElement>\n>\n\ntype RouterContextValue = {\n link?: LinkComponent\n}\n\nconst RouterContext = React.createContext<RouterContextValue>({})\n\ntype RouterProviderProps = {\n link: LinkComponent\n children: React.ReactNode\n}\n\nexport const RouterProvider = ({ link, children }: RouterProviderProps) => {\n const value = React.useMemo<RouterContextValue>(() => ({ link }), [link])\n return (\n <RouterContext.Provider value={value}>{children}</RouterContext.Provider>\n )\n}\n\nconst isAbsoluteUrl = (url?: string) => /^https?:\\/\\//.test(url || '')\n\nconst EMPTY: { as?: LinkComponent } = {}\n\nexport const useRouterLinkProps = (\n href?: string,\n { reloadDocument }: { reloadDocument?: boolean } = {}\n): { as?: LinkComponent } => {\n const { link } = React.useContext(RouterContext)\n\n if (!link || !href || isAbsoluteUrl(href) || reloadDocument) {\n return EMPTY\n }\n\n return { as: link }\n}\n\nRouterProvider.displayName = 'RouterProvider'\n"],"mappings":";;AAUA,IAAM,gBAAgB,QAAM,cAAkC,EAAE,CAAC;AAOjE,IAAa,kBAAkB,EAAE,MAAM,eAAoC;CACzE,MAAM,QAAQ,QAAM,eAAmC,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC;AACzE,QACE,wBAAA,cAAC,cAAc,UAAf,EAA+B,OAA0C,EAAlC,SAAkC;;AAI7E,IAAM,iBAAiB,QAAiB,eAAe,KAAK,OAAO,GAAG;AAEtE,IAAM,QAAgC,EAAE;AAExC,IAAa,sBACX,MACA,EAAE,mBAAiD,EAAE,KAC1B;CAC3B,MAAM,EAAE,SAAS,QAAM,WAAW,cAAc;AAEhD,KAAI,CAAC,QAAQ,CAAC,QAAQ,cAAc,KAAK,IAAI,eAC3C,QAAO;AAGT,QAAO,EAAE,IAAI,MAAM;;AAGrB,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useRouterLinkProps } from '~/components/router-provider/RouterProvider'\nimport { Tile } from '~/components/tile/Tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\n\nconst StyledTileInteractive = styled(Tile, {\n base: [\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'not-disabled:active:bg-(--base-2)',\n 'not-disabled:after:absolute',\n 'not-disabled:after:duration-250',\n 'not-disabled:after:ease-out',\n 'not-disabled:after:inset-0',\n 'not-disabled:after:opacity-0',\n 'not-disabled:after:pointer-events-none',\n 'not-disabled:after:rounded-[inherit]',\n 'not-disabled:after:shadow-lg',\n 'not-disabled:after:transition-opacity',\n 'not-disabled:cursor-pointer',\n 'not-disabled:duration-250',\n 'not-disabled:ease-in',\n 'not-disabled:focus-visible:outline-none',\n 'not-disabled:focus-visible:relative',\n 'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n 'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n 'not-disabled:focus-visible:z-1',\n 'not-disabled:hover:after:opacity-100',\n 'not-disabled:hover:-translate-y-0.5',\n 'not-disabled:transition-transform',\n 'not-disabled:translate-y-0'\n ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n typeof StyledTileInteractive\n> &\n React.ButtonHTMLAttributes<HTMLButtonElement> &\n NavigatorActions & { reloadDocument?: boolean }\n\nexport const TileInteractive = React.forwardRef<\n HTMLDivElement,\n TTileInteractiveProps\n>(({ onClick, href, type = 'button', as, reloadDocument, ...rest }, ref) => {\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n const isLink = !!href\n const elementSpecificProps = isLink\n ? {\n as: as || routerLinkProps.as || ('a' as React.ElementType),\n href,\n onClick: undefined\n }\n : {\n as: as || ('button' as React.ElementType),\n type,\n onClick\n }\n\n return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"mappings":";;;;;AAOA,IAAM,wBAAwB,OAAO,MAAM,EACzC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAQF,IAAa,kBAAkB,MAAM,YAGlC,EAAE,SAAS,MAAM,OAAO,UAAU,IAAI,gBAAgB,GAAG,QAAQ,QAAQ;CAC1E,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,gBAAgB,CAAC;CAEpE,MAAM,uBADS,CAAC,CAAC,OAEb;EACE,IAAI,MAAM,gBAAgB,MAAO;EACjC;EACA,SAAS,KAAA;EACV,GACD;EACE,IAAI,MAAO;EACX;EACA;EACD;AAEL,QAAO,sBAAA,cAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;EAAO,CAAA;EAC9E;AAEF,gBAAgB,cAAc"}
|