@atom-learning/components 10.1.0 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/action-icon/ActionIcon.d.ts +4 -3
- package/dist/components/action-icon/ActionIcon.js +4 -2
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +1 -0
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +5 -3
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +9 -2
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +5 -3
- package/dist/components/button/Button.d.ts +2 -2
- package/dist/components/button/Button.js +21 -17
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.ts +2 -1
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.d.ts +2 -1
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js +18 -13
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/link/Link.d.ts +2 -2
- package/dist/components/link/Link.js +13 -9
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +2 -1
- package/dist/components/navigation/NavigationMenuLink.d.ts +2 -1
- package/dist/components/navigation/NavigationMenuLink.js +28 -13
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +4 -2
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.d.ts +4 -2
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js +5 -3
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +5 -3
- package/dist/components/pagination/PaginationNextButton.d.ts +5 -3
- package/dist/components/pagination/PaginationPreviousButton.d.ts +5 -3
- package/dist/components/router-provider/Router.d.ts +9 -0
- package/dist/components/router-provider/Router.js +7 -0
- package/dist/components/router-provider/Router.js.map +1 -0
- package/dist/components/router-provider/RouterProvider.d.ts +16 -0
- package/dist/components/router-provider/RouterProvider.js +23 -0
- package/dist/components/router-provider/RouterProvider.js.map +1 -0
- package/dist/components/sortable/Handle.d.ts +5 -3
- package/dist/components/tile-interactive/TileInteractive.d.ts +5 -3
- package/dist/components/tile-interactive/TileInteractive.js +4 -2
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +5 -2
- package/dist/components/top-bar/TopBar.d.ts +4 -2
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +108 -59
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +2 -1
- package/package.json +1 -1
- package/dist/types/navigatorActions.types.d.ts +0 -5
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { NavigatorActions } from '../../types/navigatorActions.types';
|
|
3
2
|
import type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
|
|
4
3
|
import type { Override } from '../../utilities/types';
|
|
5
4
|
declare const StyledButton: import("../..").PolymorphicComponent<"button", {
|
|
@@ -11,7 +10,9 @@ declare const StyledButton: import("../..").PolymorphicComponent<"button", {
|
|
|
11
10
|
type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
|
|
12
11
|
as?: React.ElementType;
|
|
13
12
|
children: React.ReactNode;
|
|
13
|
+
href?: string;
|
|
14
14
|
label: string;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
reloadDocument?: boolean;
|
|
16
|
+
} & Omit<OptionalTooltipWrapperProps, 'label'>>;
|
|
17
|
+
export declare const ActionIcon: ({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: ActionIconProps) => React.JSX.Element;
|
|
17
18
|
export {};
|
|
@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
|
|
|
2
2
|
import { Icon } from "../icon/Icon.js";
|
|
3
3
|
import { OptionalTooltipWrapper } from "../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js";
|
|
4
4
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
5
|
+
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
5
6
|
import { ActionIconSizeMap } from "./ActionIcon.constants.js";
|
|
6
7
|
import * as React$1 from "react";
|
|
7
8
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -102,16 +103,17 @@ var StyledButton = styled("button", {
|
|
|
102
103
|
isRounded: { true: ["rounded-full"] }
|
|
103
104
|
}
|
|
104
105
|
}, { enableResponsiveVariants: true });
|
|
105
|
-
var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...rest }) => {
|
|
106
|
+
var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, reloadDocument, ...rest }) => {
|
|
106
107
|
const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
|
|
107
108
|
invariant(React$1.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
|
|
109
|
+
const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
|
|
108
110
|
return /* @__PURE__ */ jsx(OptionalTooltipWrapper, {
|
|
109
111
|
hasTooltip,
|
|
110
112
|
label,
|
|
111
113
|
tooltipSide,
|
|
112
114
|
children: /* @__PURE__ */ jsx(StyledButton, {
|
|
113
115
|
...href ? {
|
|
114
|
-
as: "a",
|
|
116
|
+
as: routerLinkProps.as || "a",
|
|
115
117
|
href: disabled ? void 0 : href,
|
|
116
118
|
onClick: void 0,
|
|
117
119
|
"aria-disabled": !!disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { styled } from '../../styled'\nimport type {
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { styled } from '../../styled'\nimport type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Icon } from '../icon/Icon'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-white',\n 'rounded-md',\n 'box-border',\n 'cursor-pointer',\n 'flex',\n 'shrink-0',\n 'justify-center',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n neutral: [\n '[--solid-base:var(--color-white)]',\n '[--solid-interact:var(--color-grey-100)]',\n '[--solid-active:var(--color-grey-200)]',\n '[--solid-text:var(--color-grey-1200)]',\n '[--base:var(--color-grey-700)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1100)]'\n ],\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n primaryDark: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n white: [\n '[--base:var(--color-white)]',\n '[--interact:var(--color-white)]',\n '[--active:var(--color-white)]'\n ]\n },\n appearance: {\n simple: [\n 'bg-transparent',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n outline: [\n 'bg-[unset]',\n 'border',\n 'border-current',\n 'text-(--base)',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ],\n solid: [\n 'bg-(--solid-base,var(--base))',\n 'text-(--solid-text,white)',\n 'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n 'not-disabled:hover:text-(--solid-text,white)',\n 'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n 'not-disabled:focus:text-(--solid-text,white)',\n 'not-disabled:active:bg-(--solid-active,var(--active))'\n ]\n },\n size: {\n xs: ['size-6'],\n sm: ['size-8'],\n md: ['size-10'],\n lg: ['size-12']\n },\n isRounded: {\n true: ['rounded-full']\n }\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n as?: React.ElementType\n children: React.ReactNode\n href?: string\n label: string\n reloadDocument?: boolean\n } & Omit<OptionalTooltipWrapperProps, 'label'>\n>\n\nexport const ActionIcon = ({\n ref,\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n reloadDocument,\n ...rest\n}: ActionIconProps) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n // Polymorphic props: can be either button or anchor element\n const optionalLinkProps = href\n ? ({\n as: routerLinkProps.as || 'a',\n href: disabled ? undefined : href,\n onClick: undefined,\n 'aria-disabled': !!disabled\n } as const)\n : ({ type: 'button' } as const)\n\n return (\n <OptionalTooltipWrapper\n hasTooltip={hasTooltip}\n label={label}\n tooltipSide={tooltipSide}\n >\n <StyledButton\n {...optionalLinkProps}\n {...getExternalAnchorProps(href)}\n {...rest}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref}\n disabled={disabled}\n >\n {React.Children.map(children, (child) => {\n // TS needs this check for any following code to access child.type\n // even with optional chaining\n if (!React.isValidElement(child)) {\n throw new Error(INVALID_CHILDREN_MESSAGE)\n }\n\n invariant(\n child.type === Icon,\n `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`\n )\n\n return React.cloneElement(\n child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n {\n size: ActionIconSizeMap[size as string]\n }\n )\n })}\n </StyledButton>\n </OptionalTooltipWrapper>\n )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,aAAa;IACX;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;EAChB;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAaA,IAAa,cAAc,EACzB,KACA,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,gBACA,GAAG,WACkB;CACrB,MAAM,2BAA2B,YAAY,KAAK,KAAK;CAEvD,UAAU,QAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,wBAAwB;CAExE,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAYnE,OACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI,gBAAgB,MAAM;IAC1B,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;GACrB,IACC,EAAE,MAAM,SAAS;GAUhB,GAAI,uBAAuB,IAAI;GAC/B,GAAI;GACJ,cAAY;GACL;GACK;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;IAGvC,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MAAM,wBAAwB;IAG1C,UACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,KAAK,oCACzE;IAEA,OAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,MAC1B,CACF;GACF,CAAC;EACW,CAAA;CACQ,CAAA;AAE5B"}
|
|
@@ -336,6 +336,7 @@ export declare const BannerRegular: {
|
|
|
336
336
|
size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
|
|
337
337
|
isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
338
338
|
label: string;
|
|
339
|
+
reloadDocument?: boolean;
|
|
339
340
|
}): React.JSX.Element;
|
|
340
341
|
displayName: string;
|
|
341
342
|
};
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
|
|
2
|
+
declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
|
|
3
3
|
theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
|
|
4
4
|
appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
|
|
5
5
|
size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
|
|
6
6
|
isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
7
7
|
} & {
|
|
8
8
|
as?: never;
|
|
9
|
-
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "
|
|
9
|
+
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
children: React.ReactNode;
|
|
12
|
+
href?: string;
|
|
12
13
|
label: string;
|
|
13
|
-
|
|
14
|
+
reloadDocument?: boolean;
|
|
15
|
+
} & Omit<import("../../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, unknown>;
|
|
14
16
|
type BannerRegularDismissProps = Omit<React.ComponentProps<typeof StyledDismiss>, 'children' | 'onClick' | 'href'>;
|
|
15
17
|
export declare function BannerRegularDismiss({ label, ...rest }: BannerRegularDismissProps): React.JSX.Element;
|
|
16
18
|
export declare namespace BannerRegularDismiss {
|
|
@@ -20,11 +20,17 @@ export declare const BannerSlim: {
|
|
|
20
20
|
size?: ("lg" | "md" | "sm" | "xl" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl">>) | undefined;
|
|
21
21
|
isLoading?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
22
22
|
fullWidth?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
23
|
-
},
|
|
23
|
+
}, keyof {
|
|
24
24
|
children: React.ReactNode;
|
|
25
25
|
href?: string;
|
|
26
26
|
isLoading?: boolean;
|
|
27
|
-
|
|
27
|
+
reloadDocument?: boolean;
|
|
28
|
+
}> & {
|
|
29
|
+
children: React.ReactNode;
|
|
30
|
+
href?: string;
|
|
31
|
+
isLoading?: boolean;
|
|
32
|
+
reloadDocument?: boolean;
|
|
33
|
+
}>;
|
|
28
34
|
Dismiss: {
|
|
29
35
|
({ label, ...rest }: {
|
|
30
36
|
key?: React.Key | null | undefined;
|
|
@@ -329,6 +335,7 @@ export declare const BannerSlim: {
|
|
|
329
335
|
size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
|
|
330
336
|
isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
331
337
|
label: string;
|
|
338
|
+
reloadDocument?: boolean;
|
|
332
339
|
emphasis?: ("bold" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold">>) | undefined;
|
|
333
340
|
containerSize?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
|
|
334
341
|
}): React.JSX.Element;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, ...rest }: Omit<{
|
|
2
|
+
declare const StyledDismiss: import("../../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
|
|
3
3
|
theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
|
|
4
4
|
appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
|
|
5
5
|
size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
|
|
6
6
|
isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
7
7
|
} & {
|
|
8
8
|
as?: never;
|
|
9
|
-
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "label" | "
|
|
9
|
+
} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
11
|
children: React.ReactNode;
|
|
12
|
+
href?: string;
|
|
12
13
|
label: string;
|
|
13
|
-
|
|
14
|
+
reloadDocument?: boolean;
|
|
15
|
+
} & Omit<import("../../..").OptionalTooltipWrapperProps, "label">) => React.JSX.Element, {
|
|
14
16
|
emphasis?: ("bold" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold">>) | undefined;
|
|
15
17
|
containerSize?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
|
|
16
18
|
}>;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type PolymorphicComponent } from '../../styled';
|
|
3
|
-
import type { NavigatorActions } from '../../types/navigatorActions.types';
|
|
4
3
|
import type { Override } from '../../utilities/types';
|
|
5
4
|
export declare const StyledButton: PolymorphicComponent<"button", {
|
|
6
5
|
theme?: ("danger" | "neutral" | "primary" | "secondary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "secondary" | "success" | "warning">>) | undefined;
|
|
@@ -13,7 +12,8 @@ type ButtonCustomProps = {
|
|
|
13
12
|
children: React.ReactNode;
|
|
14
13
|
href?: string;
|
|
15
14
|
isLoading?: boolean;
|
|
16
|
-
|
|
15
|
+
reloadDocument?: boolean;
|
|
16
|
+
};
|
|
17
17
|
type StyledButtonOwnProps = typeof StyledButton extends PolymorphicComponent<infer _Element extends React.ElementType, infer OwnProps> ? OwnProps : never;
|
|
18
18
|
type ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>;
|
|
19
19
|
export declare const Button: PolymorphicComponent<'button', ButtonOwnProps>;
|
|
@@ -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 { Loader } from "../loader/Loader.js";
|
|
4
5
|
import "react";
|
|
5
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -153,23 +154,26 @@ var WithLoader = ({ size, children }) => /* @__PURE__ */ jsxs(Fragment, { childr
|
|
|
153
154
|
size,
|
|
154
155
|
children
|
|
155
156
|
})] });
|
|
156
|
-
var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, ...rest }) =>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
href,
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
children
|
|
171
|
-
|
|
172
|
-
|
|
157
|
+
var Button = (({ ref, children, as, href, isLoading = false, onClick, disabled, reloadDocument, ...rest }) => {
|
|
158
|
+
const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
|
|
159
|
+
return /* @__PURE__ */ jsx(StyledButton, {
|
|
160
|
+
as: as || routerLinkProps.as || (href ? "a" : void 0),
|
|
161
|
+
...!disabled && !isLoading && {
|
|
162
|
+
href,
|
|
163
|
+
onClick
|
|
164
|
+
},
|
|
165
|
+
isLoading,
|
|
166
|
+
type: !href ? "button" : void 0,
|
|
167
|
+
disabled,
|
|
168
|
+
...rest,
|
|
169
|
+
...getExternalAnchorProps(href),
|
|
170
|
+
ref,
|
|
171
|
+
children: isLoading ? /* @__PURE__ */ jsx(WithLoader, {
|
|
172
|
+
size: rest.size,
|
|
173
|
+
children
|
|
174
|
+
}) : children
|
|
175
|
+
});
|
|
176
|
+
});
|
|
173
177
|
//#endregion
|
|
174
178
|
export { Button, StyledButton };
|
|
175
179
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type {
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Loader } from '../loader/Loader'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledButton = styled(\n 'button',\n {\n base: [\n 'items-center',\n 'bg-[unset]',\n 'rounded-md',\n 'cursor-pointer',\n 'flex',\n 'font-body',\n 'font-semibold',\n 'justify-center',\n 'no-underline',\n 'transition-all',\n 'duration-100',\n 'ease-out',\n 'whitespace-nowrap',\n 'w-max',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n theme: {\n primary: [\n '[--base:var(--color-primary-800)]',\n '[--interact:var(--color-primary-900)]',\n '[--active:var(--color-primary-1000)]'\n ],\n secondary: [\n '[--base:var(--color-primary-1000)]',\n '[--interact:var(--color-primary-1100)]',\n '[--active:var(--color-primary-1200)]'\n ],\n success: [\n '[--base:var(--color-success)]',\n '[--interact:var(--color-success-mid)]',\n '[--active:var(--color-success-dark)]'\n ],\n warning: [\n '[--base:var(--color-warning)]',\n '[--interact:var(--color-warning-mid)]',\n '[--active:var(--color-warning-dark)]',\n '[--text:var(--color-grey-800)]'\n ],\n danger: [\n '[--base:var(--color-danger)]',\n '[--interact:var(--color-danger-mid)]',\n '[--active:var(--color-danger-dark)]'\n ],\n neutral: [\n '[--base:white]',\n '[--interact:rgba(255,255,255,0.9)]',\n '[--active:rgba(255,255,255,0.75)]',\n '[--text:var(--color-primary-800)]'\n ]\n },\n appearance: {\n solid: [\n 'bg-(--base)',\n 'text-(--text,white)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:bg-(--interact)',\n 'not-disabled:hover:text-(--text,white)',\n 'not-disabled:focus:bg-(--interact)',\n 'not-disabled:focus:text-(--text,white)',\n 'not-disabled:active:bg-(--active)'\n ],\n outline: [\n 'border',\n 'border-current',\n 'text-(--base)',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n 'not-disabled:hover:no-underline',\n 'not-disabled:hover:text-(--interact)',\n 'not-disabled:focus:no-underline',\n 'not-disabled:focus:text-(--interact)',\n 'not-disabled:active:text-(--active)'\n ]\n },\n size: {\n sm: [\n 'text-sm',\n 'leading-[1.53]',\n 'h-8',\n 'px-4',\n 'gap-2',\n '[&_svg]:size-4'\n ],\n md: [\n 'text-md',\n 'leading-normal',\n 'h-10',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-5'\n ],\n lg: [\n 'text-lg',\n 'leading-normal',\n 'h-12',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ],\n xl: [\n 'text-lg',\n 'leading-normal',\n 'h-16',\n 'px-8',\n 'gap-3',\n '[&_svg]:size-[22px]'\n ]\n },\n isLoading: {\n true: ['cursor-not-allowed', 'opacity-60', 'pointer-events-none']\n },\n fullWidth: {\n true: ['w-full'],\n false: ['w-max']\n }\n },\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// StyledButton from this module.\nconst LoaderContentsWrapper = /* @__PURE__ */ styled(\n 'span',\n {\n base: ['items-center', 'flex', 'justify-center', 'invisible'],\n variants: {\n size: {\n sm: ['gap-2'],\n md: ['gap-3'],\n lg: ['gap-3'],\n xl: ['gap-3']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n {\n enableResponsiveVariants: true\n }\n)\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader className=\"absolute\" />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonCustomProps = {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n reloadDocument?: boolean\n}\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n ButtonCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledButton's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledButtonOwnProps =\n typeof StyledButton extends PolymorphicComponent<\n infer _Element extends React.ElementType,\n infer OwnProps\n >\n ? OwnProps\n : never\n\ntype ButtonOwnProps = Override<StyledButtonOwnProps, ButtonCustomProps>\n\nexport const Button = (({\n ref,\n children,\n as,\n href,\n isLoading = false,\n onClick,\n disabled,\n reloadDocument,\n ...rest\n}: ButtonProps) => {\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n return (\n <StyledButton\n as={as || routerLinkProps.as || (href ? 'a' : undefined)}\n {...(!disabled && !isLoading && { href, onClick })}\n isLoading={isLoading}\n type={!href ? 'button' : undefined}\n disabled={disabled}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n}) as PolymorphicComponent<'button', ButtonOwnProps>\n"],"mappings":";;;;;;;AAQA,IAAa,eAAe,OAC1B,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW,EACT,MAAM;GAAC;GAAsB;GAAc;EAAqB,EAClE;EACA,WAAW;GACT,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;CACA,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;CACT;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;;AAIA,IAAM,wBAAwC,uBAC5C,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;CAAW;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAEA,IAAM,cAAc,EAClB,MACA,eAEA,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAQ,WAAU,WAAY,CAAA,GAC9B,oBAAC,uBAAD;CAA6B;CAAO;AAAgC,CAAA,CACpE,EAAA,CAAA;AA2BJ,IAAa,WAAW,EACtB,KACA,UACA,IACA,MACA,YAAY,OACZ,SACA,UACA,gBACA,GAAG,WACc;CACjB,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,cAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,OAAO,MAAM,KAAA;EAC9C,GAAK,CAAC,YAAY,CAAC,aAAa;GAAE;GAAM;EAAQ;EACrC;EACX,MAAM,CAAC,OAAO,WAAW,KAAA;EACf;EACV,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;YAEJ,YACC,oBAAC,YAAD;GAAY,MAAM,KAAK;GAAO;EAAqB,CAAA,IAEnD;CAEU,CAAA;AAElB"}
|
|
@@ -8,8 +8,9 @@ export declare const DropdownMenu: React.FC<import("@radix-ui/react-dropdown-men
|
|
|
8
8
|
({ className, ...rest }: import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
|
|
9
9
|
displayName: string;
|
|
10
10
|
};
|
|
11
|
-
LinkItem: ({ children, href, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
|
|
11
|
+
LinkItem: ({ children, href, reloadDocument, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
|
|
12
12
|
href: string;
|
|
13
|
+
reloadDocument?: boolean;
|
|
13
14
|
}) => React.JSX.Element;
|
|
14
15
|
Portal: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuPortalProps>;
|
|
15
16
|
Separator: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>, unknown>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DropdownMenuItem } from './DropdownMenuItem';
|
|
3
|
-
export declare const DropdownMenuLinkItem: ({ children, href, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
|
|
3
|
+
export declare const DropdownMenuLinkItem: ({ children, href, reloadDocument, target, rel, download, ...rest }: React.ComponentProps<typeof DropdownMenuItem> & Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {
|
|
4
4
|
href: string;
|
|
5
|
+
reloadDocument?: boolean;
|
|
5
6
|
}) => React.JSX.Element;
|
|
@@ -1,23 +1,28 @@
|
|
|
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 { DropdownMenuItem } from "./DropdownMenuItem.js";
|
|
4
5
|
import "react";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
|
|
7
8
|
var StyledLink = styled("a", { base: ["no-underline"] });
|
|
8
|
-
var DropdownMenuLinkItem = ({ children, href, target, rel, download, ...rest }) =>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
var DropdownMenuLinkItem = ({ children, href, reloadDocument, target, rel, download, ...rest }) => {
|
|
10
|
+
const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
|
|
11
|
+
return /* @__PURE__ */ jsx(DropdownMenuItem, {
|
|
12
|
+
...rest,
|
|
13
|
+
asChild: true,
|
|
14
|
+
children: /* @__PURE__ */ jsx(StyledLink, {
|
|
15
|
+
as: routerLinkProps.as,
|
|
16
|
+
href,
|
|
17
|
+
target,
|
|
18
|
+
rel,
|
|
19
|
+
download,
|
|
20
|
+
role: "menuitem",
|
|
21
|
+
...getExternalAnchorProps(href),
|
|
22
|
+
children
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
};
|
|
21
26
|
//#endregion
|
|
22
27
|
export { DropdownMenuLinkItem };
|
|
23
28
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n children,\n href,\n target,\n rel,\n download,\n ...rest\n}: React.ComponentProps<typeof DropdownMenuItem> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {\n href: string\n }) => (\n // Anchor attributes belong on the rendered <a> (StyledLink); the remaining\n
|
|
1
|
+
{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n children,\n href,\n reloadDocument,\n target,\n rel,\n download,\n ...rest\n}: React.ComponentProps<typeof DropdownMenuItem> &\n Pick<React.ComponentPropsWithoutRef<'a'>, 'target' | 'rel' | 'download'> & {\n href: string\n reloadDocument?: boolean\n }) => {\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n return (\n // Anchor attributes belong on the rendered <a> (StyledLink); the remaining\n // props are DropdownMenuItem's menu-item behaviour props, which it merges onto\n // StyledLink via `asChild`. `getExternalAnchorProps` still wins for external\n // hrefs (security rel/target).\n <DropdownMenuItem {...rest} asChild>\n <StyledLink\n as={routerLinkProps.as}\n href={href}\n target={target}\n rel={rel}\n download={download}\n role=\"menuitem\"\n {...getExternalAnchorProps(href)}\n >\n {children}\n </StyledLink>\n </DropdownMenuItem>\n )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa,OAAO,KAAK,EAC7B,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAa,wBAAwB,EACnC,UACA,MACA,gBACA,QACA,KACA,UACA,GAAG,WAKG;CACN,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OAKE,oBAAC,kBAAD;EAAkB,GAAI;EAAM,SAAA;YAC1B,oBAAC,YAAD;GACE,IAAI,gBAAgB;GACd;GACE;GACH;GACK;GACV,MAAK;GACL,GAAI,uBAAuB,IAAI;GAE9B;EACS,CAAA;CACI,CAAA;AAEtB"}
|
|
@@ -61,6 +61,7 @@ export { RadioButton } from './radio-button/RadioButton';
|
|
|
61
61
|
export { RadioButtonGroup } from './radio-button/RadioButtonGroup';
|
|
62
62
|
export { RadioButtonField } from './radio-button-field/RadioButtonField';
|
|
63
63
|
export { RadioCard } from './radio-card/RadioCard';
|
|
64
|
+
export { Router } from './router-provider/Router';
|
|
64
65
|
export { RadioCardGroup } from './radio-card/RadioCardGroup';
|
|
65
66
|
export { SearchField } from './search-field/SearchField';
|
|
66
67
|
export { SearchInput } from './search-input/SearchInput';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type PolymorphicComponent } from '../../styled';
|
|
3
|
-
import type { NavigatorActions } from '../../types/navigatorActions.types';
|
|
4
3
|
import type { Override } from '../../utilities/types';
|
|
5
4
|
export declare const StyledLink: PolymorphicComponent<"a", {
|
|
6
5
|
size?: ("lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
|
|
7
6
|
noCapsize?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
|
|
8
7
|
}>;
|
|
9
|
-
type LinkCustomProps =
|
|
8
|
+
type LinkCustomProps = {
|
|
10
9
|
disabled?: boolean;
|
|
10
|
+
reloadDocument?: boolean;
|
|
11
11
|
};
|
|
12
12
|
type StyledLinkOwnProps = typeof StyledLink extends PolymorphicComponent<infer _Element extends React.ElementType, infer OwnProps> ? OwnProps : never;
|
|
13
13
|
type LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>;
|
|
@@ -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 "react";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/link/Link.tsx
|
|
@@ -54,15 +55,18 @@ var StyledLink = styled("a", {
|
|
|
54
55
|
},
|
|
55
56
|
defaultVariants: { size: "md" }
|
|
56
57
|
}, { enableResponsiveVariants: true });
|
|
57
|
-
var Link = (({ ref, as, disabled, href, ...rest }) =>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
var Link = (({ ref, as, disabled, href, reloadDocument, ...rest }) => {
|
|
59
|
+
const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
|
|
60
|
+
return /* @__PURE__ */ jsx(StyledLink, {
|
|
61
|
+
as: as || routerLinkProps.as || (!href ? "button" : void 0),
|
|
62
|
+
noCapsize: !href ? true : void 0,
|
|
63
|
+
href,
|
|
64
|
+
...disabled && { disabled: true },
|
|
65
|
+
...rest,
|
|
66
|
+
...getExternalAnchorProps(href),
|
|
67
|
+
ref
|
|
68
|
+
});
|
|
69
|
+
});
|
|
66
70
|
//#endregion
|
|
67
71
|
export { Link, StyledLink };
|
|
68
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type {
|
|
1
|
+
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledLink = styled(\n 'a',\n {\n base: [\n 'bg-[unset]',\n 'text-primary-800',\n 'cursor-pointer',\n 'font-body',\n 'no-underline',\n 'focus:text-primary-900',\n 'focus:underline',\n 'hover:text-primary-900',\n 'hover:underline',\n 'active:text-primary-1000',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n ],\n variants: {\n size: {\n xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['capsize-none']\n }\n },\n defaultVariants: {\n size: 'md'\n }\n },\n { enableResponsiveVariants: true }\n)\n\ntype LinkCustomProps = {\n disabled?: boolean\n reloadDocument?: boolean\n}\n\ntype LinkProps = Override<\n React.ComponentProps<typeof StyledLink>,\n LinkCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledLink's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledLinkOwnProps =\n typeof StyledLink extends PolymorphicComponent<\n infer _Element extends React.ElementType,\n infer OwnProps\n >\n ? OwnProps\n : never\n\ntype LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>\n\nexport const Link = (({\n ref,\n as,\n disabled,\n href,\n reloadDocument,\n ...rest\n}: LinkProps) => {\n const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n return (\n <StyledLink\n as={as || routerLinkProps.as || (!href ? 'button' : undefined)}\n noCapsize={!href ? true : undefined}\n href={href}\n {...(disabled && { disabled: true })}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n />\n )\n}) as PolymorphicComponent<'a', LinkOwnProps>\n"],"mappings":";;;;;;AAOA,IAAa,aAAa,OACxB,KACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAwBA,IAAa,SAAS,EACpB,KACA,IACA,UACA,MACA,gBACA,GAAG,WACY;CACf,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,YAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,CAAC,OAAO,WAAW,KAAA;EACpD,WAAW,CAAC,OAAO,OAAO,KAAA;EACpB;EACN,GAAK,YAAY,EAAE,UAAU,KAAK;EAClC,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;CACN,CAAA;AAEL"}
|
|
@@ -6,13 +6,14 @@ export declare const NavigationMenu: {
|
|
|
6
6
|
({ children, className, ...rest }: React.ComponentProps<typeof StyledMenu>): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
} & {
|
|
9
|
-
Link: ({ ref, children, href, disabled, className, variant, ...rest }: Omit<React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
|
|
9
|
+
Link: ({ ref, children, href, disabled, className, variant, reloadDocument, ...rest }: Omit<React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
|
|
10
10
|
elementType?: "dropdownItem" | "link" | undefined;
|
|
11
11
|
}>>, 'elementType'> & {
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
variant?: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
|
|
14
14
|
elementType?: "dropdownItem" | "link" | undefined;
|
|
15
15
|
}>>['elementType'];
|
|
16
|
+
reloadDocument?: boolean;
|
|
16
17
|
ref?: React.Ref<HTMLAnchorElement>;
|
|
17
18
|
}) => React.JSX.Element;
|
|
18
19
|
Dropdown: {
|
|
@@ -3,9 +3,10 @@ import * as React from 'react';
|
|
|
3
3
|
declare const StyledLink: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
|
|
4
4
|
elementType?: "dropdownItem" | "link" | undefined;
|
|
5
5
|
}>;
|
|
6
|
-
export declare const NavigationMenuLink: ({ ref, children, href, disabled, className, variant, ...rest }: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {
|
|
6
|
+
export declare const NavigationMenuLink: ({ ref, children, href, disabled, className, variant, reloadDocument, ...rest }: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
variant?: React.ComponentProps<typeof StyledLink>['elementType'];
|
|
9
|
+
reloadDocument?: boolean;
|
|
9
10
|
ref?: React.Ref<HTMLAnchorElement>;
|
|
10
11
|
}) => React.JSX.Element;
|
|
11
12
|
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";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -47,19 +48,33 @@ var StyledLink = styled(NavigationMenuPrimitive.Link, {
|
|
|
47
48
|
]
|
|
48
49
|
} }
|
|
49
50
|
});
|
|
50
|
-
var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", ...rest }) =>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
51
|
+
var NavigationMenuLink = ({ ref, children, href, disabled, className, variant = "link", reloadDocument, ...rest }) => {
|
|
52
|
+
const RouterLink = useRouterLinkProps(href, { reloadDocument }).as;
|
|
53
|
+
return /* @__PURE__ */ jsx(ListItem, { children: disabled ? /* @__PURE__ */ jsx(DisabledButton, {
|
|
54
|
+
disabled: true,
|
|
55
|
+
className,
|
|
56
|
+
children
|
|
57
|
+
}) : RouterLink ? /* @__PURE__ */ jsx(StyledLink, {
|
|
58
|
+
href,
|
|
59
|
+
ref,
|
|
60
|
+
elementType: variant,
|
|
61
|
+
className,
|
|
62
|
+
asChild: true,
|
|
63
|
+
...rest,
|
|
64
|
+
children: /* @__PURE__ */ jsx(RouterLink, {
|
|
65
|
+
href,
|
|
66
|
+
children
|
|
67
|
+
})
|
|
68
|
+
}) : /* @__PURE__ */ jsx(StyledLink, {
|
|
69
|
+
href,
|
|
70
|
+
ref,
|
|
71
|
+
elementType: variant,
|
|
72
|
+
className,
|
|
73
|
+
...getExternalAnchorProps(href),
|
|
74
|
+
...rest,
|
|
75
|
+
children
|
|
76
|
+
}) });
|
|
77
|
+
};
|
|
63
78
|
//#endregion
|
|
64
79
|
export { NavigationMenuLink };
|
|
65
80
|
|
|
@@ -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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\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 = ({\n ref,\n children,\n href,\n disabled,\n className,\n variant = 'link',\n ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n disabled?: boolean\n variant?: React.ComponentProps<typeof StyledLink>['elementType']\n ref?: React.Ref<HTMLAnchorElement>\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 * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { getExternalAnchorProps } from '../../utilities/uri'\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 = ({\n ref,\n children,\n href,\n disabled,\n className,\n variant = 'link',\n reloadDocument,\n ...rest\n}: Omit<React.ComponentProps<typeof StyledLink>, 'elementType'> & {\n disabled?: boolean\n variant?: React.ComponentProps<typeof StyledLink>['elementType']\n reloadDocument?: boolean\n ref?: React.Ref<HTMLAnchorElement>\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={ref}\n elementType={variant}\n className={className}\n asChild\n {...rest}\n >\n <RouterLink href={href}>{children}</RouterLink>\n </StyledLink>\n ) : (\n <StyledLink\n href={href}\n ref={ref}\n elementType={variant}\n className={className}\n {...getExternalAnchorProps(href)}\n {...rest}\n >\n {children}\n </StyledLink>\n )}\n </ListItem>\n )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,GAAG;CACH;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,WAAW,wBAAwB;AAEzC,IAAM,aAAa,OAAO,wBAAwB,MAAM;CACtD,MAAM;EACJ,GAAG;EACH;EACA;EACA;CACF;CACA,UAAU,EACR,aAAa;EACX,cAAc;GACZ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,KACA,UACA,MACA,UACA,WACA,UAAU,QACV,gBACA,GAAG,WAMC;CAEJ,MAAM,aADkB,mBAAmB,MAAM,EAAE,eAAe,CAC/C,CAAA,CAAgB;CAEnC,OACE,oBAAC,UAAD,EAAA,UACG,WACC,oBAAC,gBAAD;EAAgB,UAAA;EAAoB;EACjC;CACa,CAAA,IACd,aACF,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,SAAA;EACA,GAAI;YAEJ,oBAAC,YAAD;GAAkB;GAAO;EAAqB,CAAA;CACpC,CAAA,IAEZ,oBAAC,YAAD;EACQ;EACD;EACL,aAAa;EACF;EACX,GAAI,uBAAuB,IAAI;EAC/B,GAAI;EAEH;CACS,CAAA,EAEN,CAAA;AAEd"}
|
|
@@ -2,11 +2,13 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledRoot: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuProps & React.RefAttributes<HTMLElement>>, unknown>;
|
|
3
3
|
type NavigationVerticalProps = Omit<React.ComponentProps<typeof StyledRoot>, 'delayDuration' | 'skipDelayDuration' | 'defaultValue' | 'value' | 'onValueChange'>;
|
|
4
4
|
export declare const NavigationMenuVertical: (({ children, ...rest }: NavigationVerticalProps) => React.JSX.Element) & {
|
|
5
|
-
Link: ({ as, href, children, ...rest }: {
|
|
5
|
+
Link: ({ as, href, children, reloadDocument, ...rest }: {
|
|
6
6
|
size?: "lg" | "md" | undefined;
|
|
7
7
|
} & {
|
|
8
8
|
as?: never;
|
|
9
|
-
} & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "as" | "size">
|
|
9
|
+
} & Omit<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "as" | "size"> & {
|
|
10
|
+
reloadDocument?: boolean;
|
|
11
|
+
}) => React.JSX.Element;
|
|
10
12
|
Accordion: ({ defaultOpen, open, onOpenChange, disabled, ...rest }: import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement> & {
|
|
11
13
|
key?: React.Key | null | undefined;
|
|
12
14
|
ref?: React.Ref<HTMLLIElement> | undefined;
|
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
declare const StyledNavigationMenuVerticalLink: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>, {
|
|
3
3
|
size?: "lg" | "md" | undefined;
|
|
4
4
|
}>;
|
|
5
|
-
type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink
|
|
6
|
-
|
|
5
|
+
type NavigationMenuVerticalItemProps = React.ComponentProps<typeof StyledNavigationMenuVerticalLink> & {
|
|
6
|
+
reloadDocument?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare const NavigationMenuVerticalLink: ({ as, href, children, reloadDocument, ...rest }: NavigationMenuVerticalItemProps) => React.JSX.Element;
|
|
7
9
|
export {};
|