@atom-learning/components 6.16.0-beta.4 → 6.16.1-beta.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 +0 -1
- package/dist/components/action-icon/ActionIcon.js +2 -4
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +0 -1
- package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +1 -2
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +0 -1
- package/dist/components/banner/banner-slim/BannerSlimContainer.d.ts +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContainer.js +3 -3
- package/dist/components/banner/banner-slim/BannerSlimContainer.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +1 -2
- package/dist/components/button/Button.d.ts +0 -1
- package/dist/components/button/Button.js +13 -17
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/data-table/DataTableTable.js +2 -2
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTable.js +6 -3
- package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.d.ts +1 -2
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.d.ts +1 -2
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js +8 -13
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/link/Link.d.ts +0 -1
- package/dist/components/link/Link.js +9 -13
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +0 -2
- package/dist/components/navigation/NavigationMenuDropdownItem.d.ts +0 -1
- package/dist/components/navigation/NavigationMenuLink.d.ts +0 -1
- package/dist/components/navigation/NavigationMenuLink.js +11 -22
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.d.ts +1 -3
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.d.ts +2 -4
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js +3 -5
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map +1 -1
- package/dist/components/number-input/NumberInput.js +2 -2
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +1 -2
- package/dist/components/pagination/PaginationNextButton.d.ts +1 -2
- package/dist/components/pagination/PaginationPreviousButton.d.ts +1 -2
- package/dist/components/password-field/PasswordField.js +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlBadge.js +1 -1
- package/dist/components/segmented-control/SegmentedControlBadge.js.map +1 -1
- package/dist/components/select-menu/SelectMenu.d.ts +23 -0
- package/dist/components/select-menu/SelectMenu.js +26 -0
- package/dist/components/select-menu/SelectMenu.js.map +1 -0
- package/dist/components/select-menu/SelectMenuContent.d.ts +3 -0
- package/dist/components/select-menu/SelectMenuContent.js +66 -0
- package/dist/components/select-menu/SelectMenuContent.js.map +1 -0
- package/dist/components/select-menu/SelectMenuContext.d.ts +9 -0
- package/dist/components/select-menu/SelectMenuContext.js +11 -0
- package/dist/components/select-menu/SelectMenuContext.js.map +1 -0
- package/dist/components/select-menu/SelectMenuItem.d.ts +3 -0
- package/dist/components/select-menu/SelectMenuItem.js +59 -0
- package/dist/components/select-menu/SelectMenuItem.js.map +1 -0
- package/dist/components/select-menu/SelectMenuLabel.d.ts +8 -0
- package/dist/components/select-menu/SelectMenuLabel.js +16 -0
- package/dist/components/select-menu/SelectMenuLabel.js.map +1 -0
- package/dist/components/select-menu/SelectMenuSeparator.d.ts +4 -0
- package/dist/components/select-menu/SelectMenuSeparator.js +13 -0
- package/dist/components/select-menu/SelectMenuSeparator.js.map +1 -0
- package/dist/components/select-menu/SelectMenuTrigger.d.ts +7 -0
- package/dist/components/select-menu/SelectMenuTrigger.js +91 -0
- package/dist/components/select-menu/SelectMenuTrigger.js.map +1 -0
- package/dist/components/select-menu-field/SelectMenuField.d.ts +14 -0
- package/dist/components/select-menu-field/SelectMenuField.js +46 -0
- package/dist/components/select-menu-field/SelectMenuField.js.map +1 -0
- package/dist/components/skeleton-loader/SkeletonCard.js +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -1
- package/dist/components/sortable/Handle.d.ts +1 -2
- package/dist/components/tile-interactive/TileInteractive.d.ts +1 -3
- package/dist/components/tile-interactive/TileInteractive.js +2 -4
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts +1 -3
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +3 -3
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toast/ToastProvider.js +2 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/top-bar/TopBar.d.ts +1 -2
- package/dist/components/tree/Tree.d.ts +1 -1
- package/dist/components/tree/TreeIcon.js +1 -1
- package/dist/components/tree/TreeIcon.js.map +1 -1
- package/dist/components/tree/TreeListItem.js +1 -1
- package/dist/components/tree/TreeListItem.js.map +1 -1
- package/dist/components/tree/TreeText.d.ts +1 -1
- package/dist/components/tree/TreeText.js +3 -3
- package/dist/components/tree/TreeText.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +345 -110
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +3 -2
- package/package.json +3 -1
- package/src/index.css +2 -0
- package/dist/components/router-provider/RouterProvider.d.ts +0 -16
- package/dist/components/router-provider/RouterProvider.js +0 -19
- package/dist/components/router-provider/RouterProvider.js.map +0 -1
|
@@ -15,7 +15,6 @@ declare const StyledButton: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
|
|
|
15
15
|
type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
|
|
16
16
|
children: React.ReactNode;
|
|
17
17
|
label: string;
|
|
18
|
-
reloadDocument?: boolean;
|
|
19
18
|
} & Omit<TOptionalTooltipWrapperProps, 'label'> & NavigatorActions>;
|
|
20
19
|
export declare const ActionIcon: React.ForwardRefExoticComponent<Omit<ActionIconProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
21
20
|
export {};
|
|
@@ -2,7 +2,6 @@ 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";
|
|
6
5
|
import { ActionIconSizeMap } from "./ActionIcon.constants.js";
|
|
7
6
|
import * as React$1 from "react";
|
|
8
7
|
import invariant from "invariant";
|
|
@@ -102,12 +101,11 @@ var StyledButton = styled("button", {
|
|
|
102
101
|
isRounded: { true: ["rounded-full"] }
|
|
103
102
|
}
|
|
104
103
|
}, { enabledResponsiveVariants: true });
|
|
105
|
-
var ActionIcon = React$1.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide,
|
|
104
|
+
var ActionIcon = React$1.forwardRef(({ children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, ...remainingProps }, ref) => {
|
|
106
105
|
const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`;
|
|
107
106
|
invariant(React$1.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
|
|
108
|
-
const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
|
|
109
107
|
const optionalLinkProps = href ? {
|
|
110
|
-
as:
|
|
108
|
+
as: "a",
|
|
111
109
|
href: disabled ? void 0 : href,
|
|
112
110
|
onClick: void 0,
|
|
113
111
|
"aria-disabled": !!disabled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\nimport {
|
|
1
|
+
{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport type { TOptionalTooltipWrapperProps } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '~/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { Icon } from '../icon/Icon'\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 enabledResponsiveVariants: true\n }\n)\n\ntype ActionIconProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n label: string\n } & Omit<TOptionalTooltipWrapperProps, 'label'> &\n NavigatorActions\n>\n\nexport const ActionIcon = React.forwardRef<HTMLButtonElement, ActionIconProps>(\n (\n {\n children,\n theme = 'primary',\n appearance = 'simple',\n size = 'sm',\n label,\n href,\n disabled,\n hasTooltip = true,\n tooltipSide,\n ...remainingProps\n },\n ref\n ) => {\n const INVALID_CHILDREN_MESSAGE = `A single ${Icon.displayName} component is permitted as a child of ${ActionIcon.displayName}`\n\n invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n // Polymorphic props: can be either button or anchor element\n // Type assertion needed due to TypeScript limitations with polymorphic components\n const optionalLinkProps = href\n ? ({\n 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 as any)}\n {...getExternalAnchorProps(href)}\n {...remainingProps}\n aria-label={label}\n theme={theme}\n appearance={appearance}\n size={size}\n ref={ref as any}\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.displayName} component is allowed in ${ActionIcon.displayName}`\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)\n\nActionIcon.displayName = 'ActionIcon'\n"],"mappings":";;;;;;;;AAaA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,UAAU;GACf,IAAI,CAAC,UAAU;GAChB;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAWD,IAAa,aAAa,QAAM,YAE5B,EACE,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,GAAG,kBAEL,QACG;CACH,MAAM,2BAA2B,YAAY,KAAK,YAAY,wCAAwC,WAAW;AAEjH,WAAU,QAAM,SAAS,MAAM,SAAS,KAAK,GAAG,yBAAyB;CAIzE,MAAM,oBAAoB,OACrB;EACC,IAAI;EACJ,MAAM,WAAW,KAAA,IAAY;EAC7B,SAAS,KAAA;EACT,iBAAiB,CAAC,CAAC;EACpB,GACA,EAAE,MAAM,UAAU;AAEvB,QACE,wBAAA,cAAC,wBAAD;EACc;EACL;EACM;EAiCU,EA/BvB,wBAAA,cAAC,cAAD;EACE,GAAK;EACL,GAAI,uBAAuB,KAAK;EAChC,GAAI;EACJ,cAAY;EACL;EACK;EACN;EACD;EACK;EAqBG,EAnBZ,QAAM,SAAS,IAAI,WAAW,UAAU;AAGvC,MAAI,CAAC,QAAM,eAAe,MAAM,CAC9B,OAAM,IAAI,MAAM,yBAAyB;AAG3C,YACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,YAAY,2BAA2B,WAAW,cACrH;AAED,SAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,OACzB,CACF;GACD,CACW,CACQ;EAG9B;AAED,WAAW,cAAc"}
|
|
@@ -314,7 +314,6 @@ export declare const BannerRegular: {
|
|
|
314
314
|
formTarget?: string | undefined | undefined;
|
|
315
315
|
hasTooltip?: boolean | undefined;
|
|
316
316
|
tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
|
|
317
|
-
reloadDocument?: boolean | undefined;
|
|
318
317
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
319
318
|
}): React.JSX.Element;
|
|
320
319
|
displayName: string;
|
|
@@ -8,10 +8,9 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
|
|
|
8
8
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
|
-
}, "children" | "label" | "hasTooltip" | "tooltipSide" |
|
|
11
|
+
}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../..").NavigatorActions> & {
|
|
12
12
|
children: React.ReactNode;
|
|
13
13
|
label: string;
|
|
14
|
-
reloadDocument?: boolean;
|
|
15
14
|
} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, never> & {
|
|
16
15
|
as?: React.ElementType;
|
|
17
16
|
}>;
|
|
@@ -302,7 +302,6 @@ export declare const BannerSlim: {
|
|
|
302
302
|
formTarget?: string | undefined | undefined;
|
|
303
303
|
hasTooltip?: boolean | undefined;
|
|
304
304
|
tooltipSide?: "bottom" | "left" | "right" | "top" | undefined;
|
|
305
|
-
reloadDocument?: boolean | undefined;
|
|
306
305
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
307
306
|
emphasis?: ("bold" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold">>) | undefined;
|
|
308
307
|
containerSize?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
|
|
@@ -17,7 +17,7 @@ declare const StyledBannerSlimContainer: React.ForwardRefExoticComponent<Omit<Om
|
|
|
17
17
|
}>;
|
|
18
18
|
type TBannerSlimContainerProps = React.ComponentProps<typeof StyledBannerSlimContainer>;
|
|
19
19
|
export declare const BannerSlimContainer: {
|
|
20
|
-
(
|
|
20
|
+
({ className, ...rest }: TBannerSlimContainerProps): JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
22
|
};
|
|
23
23
|
export {};
|
|
@@ -22,7 +22,7 @@ var StyledBannerSlimContainer = styled(BannerContainer, {
|
|
|
22
22
|
md: ["px-6"]
|
|
23
23
|
} }
|
|
24
24
|
}, { enabledResponsiveVariants: true });
|
|
25
|
-
var BannerSlimContainer = (
|
|
25
|
+
var BannerSlimContainer = ({ className, ...rest }) => {
|
|
26
26
|
const { size } = useBannerContext();
|
|
27
27
|
const direction = React$1.useMemo(() => {
|
|
28
28
|
if (typeof size === "string") return toDirection[size];
|
|
@@ -37,9 +37,9 @@ var BannerSlimContainer = (props) => {
|
|
|
37
37
|
return "flex-wrap md:flex-nowrap";
|
|
38
38
|
}, [size]);
|
|
39
39
|
return /* @__PURE__ */ React$1.createElement(StyledBannerSlimContainer, {
|
|
40
|
-
...
|
|
40
|
+
...rest,
|
|
41
41
|
sizeWorkaround: size,
|
|
42
|
-
className: cn(direction, align, "gap-4", wrap,
|
|
42
|
+
className: cn(direction, align, "gap-4", wrap, className)
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
BannerSlimContainer.displayName = "BannerSlimContainer";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nconst toAlign = {\n sm: 'items-start',\n md: 'items-center'\n}\n\nconst toWrap = {\n sm: 'flex-wrap',\n md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n BannerContainer,\n {\n base: ['p-4'],\n variants: {\n sizeWorkaround: {\n sm: [],\n md: ['px-6']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = (\n
|
|
1
|
+
{"version":3,"file":"BannerSlimContainer.js","names":[],"sources":["../../../../src/components/banner/banner-slim/BannerSlimContainer.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '~/styled'\n\nimport { BannerContainer } from '../BannerContainer'\nimport { useBannerContext } from '../BannerContext'\n\nconst toDirection = {\n sm: 'flex-col',\n md: 'flex-row'\n}\n\nconst toAlign = {\n sm: 'items-start',\n md: 'items-center'\n}\n\nconst toWrap = {\n sm: 'flex-wrap',\n md: 'flex-nowrap'\n}\n\nconst StyledBannerSlimContainer = styled(\n BannerContainer,\n {\n base: ['p-4'],\n variants: {\n sizeWorkaround: {\n sm: [],\n md: ['px-6']\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\ntype TBannerSlimContainerProps = React.ComponentProps<\n typeof StyledBannerSlimContainer\n>\n\nexport const BannerSlimContainer = ({\n className,\n ...rest\n}: TBannerSlimContainerProps): JSX.Element => {\n const { size } = useBannerContext()\n\n const direction = React.useMemo(() => {\n if (typeof size === 'string') {\n return toDirection[size]\n }\n return 'flex-col md:flex-row'\n }, [size])\n\n const align = React.useMemo(() => {\n if (typeof size === 'string') {\n return toAlign[size]\n }\n return 'items-start md:items-center'\n }, [size])\n\n const wrap = React.useMemo(() => {\n if (typeof size === 'string') {\n return toWrap[size]\n }\n return 'flex-wrap md:flex-nowrap'\n }, [size])\n\n return (\n <StyledBannerSlimContainer\n {...rest}\n sizeWorkaround={size}\n className={cn(direction, align, 'gap-4', wrap, className)}\n />\n )\n}\n\nBannerSlimContainer.displayName = 'BannerSlimContainer'\n"],"mappings":";;;;;AAOA,IAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACL;AAED,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACL;AAED,IAAM,SAAS;CACb,IAAI;CACJ,IAAI;CACL;AAED,IAAM,4BAA4B,OAChC,iBACA;CACE,MAAM,CAAC,MAAM;CACb,UAAU,EACR,gBAAgB;EACd,IAAI,EAAE;EACN,IAAI,CAAC,OAAO;EACb,EACF;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAMD,IAAa,uBAAuB,EAClC,WACA,GAAG,WACyC;CAC5C,MAAM,EAAE,SAAS,kBAAkB;CAEnC,MAAM,YAAY,QAAM,cAAc;AACpC,MAAI,OAAO,SAAS,SAClB,QAAO,YAAY;AAErB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,QAAM,cAAc;AAChC,MAAI,OAAO,SAAS,SAClB,QAAO,QAAQ;AAEjB,SAAO;IACN,CAAC,KAAK,CAAC;CAEV,MAAM,OAAO,QAAM,cAAc;AAC/B,MAAI,OAAO,SAAS,SAClB,QAAO,OAAO;AAEhB,SAAO;IACN,CAAC,KAAK,CAAC;AAEV,QACE,wBAAA,cAAC,2BAAD;EACE,GAAI;EACJ,gBAAgB;EAChB,WAAW,GAAG,WAAW,OAAO,SAAS,MAAM,UAAU;EACzD,CAAA;;AAIN,oBAAoB,cAAc"}
|
|
@@ -8,10 +8,9 @@ declare const StyledDismiss: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit
|
|
|
8
8
|
isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
|
|
9
9
|
} & {
|
|
10
10
|
as?: React.ElementType;
|
|
11
|
-
}, "children" | "label" | "hasTooltip" | "tooltipSide" |
|
|
11
|
+
}, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../..").NavigatorActions> & {
|
|
12
12
|
children: React.ReactNode;
|
|
13
13
|
label: string;
|
|
14
|
-
reloadDocument?: boolean;
|
|
15
14
|
} & Omit<import("../../..").TOptionalTooltipWrapperProps, "label"> & import("../../..").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "containerSize"> & {
|
|
16
15
|
emphasis?: ("bold" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold">>) | undefined;
|
|
17
16
|
containerSize?: ("sm" | "md" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md">>) | undefined;
|
|
@@ -16,7 +16,6 @@ type ButtonProps = Override<React.ComponentProps<typeof StyledButton>, {
|
|
|
16
16
|
children: React.ReactNode;
|
|
17
17
|
href?: string;
|
|
18
18
|
isLoading?: boolean;
|
|
19
|
-
reloadDocument?: boolean;
|
|
20
19
|
} & NavigatorActions>;
|
|
21
20
|
export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
22
21
|
export {};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
3
|
-
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
4
3
|
import { Loader } from "../loader/Loader.js";
|
|
5
4
|
import * as React$1 from "react";
|
|
6
5
|
//#region src/components/button/Button.tsx
|
|
@@ -145,22 +144,19 @@ var LoaderContentsWrapper = styled("span", {
|
|
|
145
144
|
defaultVariants: { size: "md" }
|
|
146
145
|
}, { enabledResponsiveVariants: true });
|
|
147
146
|
var WithLoader = ({ size, children }) => /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(Loader, { className: "absolute" }), /* @__PURE__ */ React$1.createElement(LoaderContentsWrapper, { size }, children));
|
|
148
|
-
var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled,
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
ref
|
|
162
|
-
}, isLoading ? /* @__PURE__ */ React$1.createElement(WithLoader, { size: rest.size }, children) : children);
|
|
163
|
-
});
|
|
147
|
+
var Button = React$1.forwardRef(({ children, as, href, isLoading = false, onClick, disabled, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledButton, {
|
|
148
|
+
as: as || (href ? "a" : void 0),
|
|
149
|
+
...!disabled && !isLoading && {
|
|
150
|
+
href,
|
|
151
|
+
onClick
|
|
152
|
+
},
|
|
153
|
+
isLoading,
|
|
154
|
+
type: !href ? "button" : void 0,
|
|
155
|
+
disabled,
|
|
156
|
+
...rest,
|
|
157
|
+
...getExternalAnchorProps(href),
|
|
158
|
+
ref
|
|
159
|
+
}, isLoading ? /* @__PURE__ */ React$1.createElement(WithLoader, { size: rest.size }, children) : children));
|
|
164
160
|
Button.displayName = "Button";
|
|
165
161
|
//#endregion
|
|
166
162
|
export { Button, StyledButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\
|
|
1
|
+
{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Loader } from '~/components/loader/Loader'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\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 enabledResponsiveVariants: true\n }\n)\n\nconst LoaderContentsWrapper = 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 enabledResponsiveVariants: 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 ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n {\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button = React.forwardRef<HTMLElement, ButtonProps>(\n (\n { children, as, href, isLoading = false, onClick, disabled, ...rest },\n ref\n ) => (\n <StyledButton\n as={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 as any}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n)\n\nButton.displayName = 'Button'\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;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACD;GACF;EACD,YAAY;GACV,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,WAAW,EACT,MAAM,CAAC,oDAAoD,EAC5D;EACD,WAAW;GACT,MAAM,CAAC,SAAS;GAChB,OAAO,CAAC,QAAQ;GACjB;EACF;CACD,iBAAiB;EACf,YAAY;EACZ,MAAM;EACN,OAAO;EACR;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,wBAAwB,OAC5B,QACA;CACE,MAAM;EAAC;EAAgB;EAAQ;EAAkB;EAAY;CAC7D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,QAAQ;EACd,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EACE,2BAA2B,MAC5B,CACF;AAED,IAAM,cAAc,EAClB,MACA,eAEA,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,QAAD,EAAQ,WAAU,YAAa,CAAA,EAC/B,wBAAA,cAAC,uBAAD,EAA6B,MAAwC,EAAjC,SAAiC,CACpE;AAYL,IAAa,SAAS,QAAM,YAExB,EAAE,UAAU,IAAI,MAAM,YAAY,OAAO,SAAS,UAAU,GAAG,QAC/D,QAEA,wBAAA,cAAC,cAAD;CACE,IAAI,OAAO,OAAO,MAAM,KAAA;CACxB,GAAK,CAAC,YAAY,CAAC,aAAa;EAAE;EAAM;EAAS;CACtC;CACX,MAAM,CAAC,OAAO,WAAW,KAAA;CACf;CACV,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;CAOQ,EALZ,YACC,wBAAA,cAAC,YAAD,EAAY,MAAM,KAAK,MAA6B,EAAtB,SAAsB,GAEpD,SAEW,CAElB;AAED,OAAO,cAAc"}
|
|
@@ -94,14 +94,14 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
|
|
|
94
94
|
numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
|
|
95
95
|
scrollContainerCls: scrollOptions.scrollContainerCls,
|
|
96
96
|
scrollContainerkey: buildScrollContainerKey(),
|
|
97
|
-
className: cn(
|
|
97
|
+
className: cn(isPending && [
|
|
98
98
|
"opacity-50",
|
|
99
99
|
"pointer-events-none",
|
|
100
100
|
"transition-opacity",
|
|
101
101
|
"duration-250",
|
|
102
102
|
"linear",
|
|
103
103
|
"delay-150"
|
|
104
|
-
])
|
|
104
|
+
], className)
|
|
105
105
|
}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
|
|
106
106
|
theme,
|
|
107
107
|
sortable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: string\n numberOfStickyColumns?: number\n scrollContainerCls?: string | string[]\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n className,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof window === 'undefined') return null\n return window\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries || entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader ||\n Object.keys(rowSelection || {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCls={scrollOptions.scrollContainerCls}\n scrollContainerkey={buildScrollContainerKey()}\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: string\n numberOfStickyColumns?: number\n scrollContainerCls?: string | string[]\n showTotalInFirstColumn?: boolean\n totalSuffix?: string\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n withContainer?: boolean\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme = 'white',\n className,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false,\n showTotalInFirstColumn: true,\n totalSuffix: 'items'\n },\n rowAction,\n withContainer = false,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n if (typeof window === 'undefined') return null\n return window\n }, [])\n\n React.useEffect(() => {\n if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries || entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (scrollTarget) {\n if (entry.isIntersecting) {\n // add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n // remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader ||\n Object.keys(rowSelection || {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n if (scrollTarget) {\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n const tableComponent = (\n <Table\n corners=\"round\"\n size=\"lg\"\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCls={scrollOptions.scrollContainerCls}\n scrollContainerkey={buildScrollContainerKey()}\n className={cn(\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity',\n 'duration-250',\n 'linear',\n 'delay-150'\n ],\n className\n )}\n >\n <DataTableHead\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n className={scrollOptions.headerCss}\n showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n totalSuffix={scrollOptions.totalSuffix}\n />\n <DataTableBody striped={striped} rowAction={rowAction} />\n </Table>\n )\n\n return (\n <>\n <DataTableLoading />\n {withContainer ? (\n <TableContainer\n className={cn(\n scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n )}\n >\n {tableComponent}\n </TableContainer>\n ) : (\n tableComponent\n )}\n </>\n )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;CAAa,EACxC,CAAC;AAuBF,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;CACd,EACD,WACA,gBAAgB,OAChB,GAAG,YAC0C;CAC7C,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,cAAc;CAElB,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,iBAAiB,QAAM,OAAO,MAAM;CAC1C,MAAM,cAAc,QAAM,OAAgB,MAAM;CAEhD,MAAM,eAAe,QAAM,cAAc;AACvC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;IACN,EAAE,CAAC;AAEN,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,OAAO,yBAAyB,YACnD;EAGF,MAAM,uBAAuB;AAC3B,OAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,uBAAuB,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,uBAAuB,CAAC;AAE7D,sBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;KACT,EAAE;;AAEL,eAAY,UAAU;;EAGxB,MAAM,qBAAqB;AACzB,OAAI,CAAC,YAAY,SAAS;AACxB,0BAAsB,eAAe;AACrC,gBAAY,UAAU;;;AAI1B,MAAI,CAAC,SAAS,QAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;GACZ;EAED,MAAM,2BAA2B,YAAyC;AACxE,OAAI,CAAC,WAAW,QAAQ,WAAW,EAAG;GACtC,MAAM,QAAQ,QAAQ;AAEtB,kBAAe,UAAU,MAAM;AAE/B,OAAI,aACF,KAAI,MAAM,eAER,eAAc,iBAAiB,UAAU,aAAa;OAGtD,eAAc,oBAAoB,UAAU,aAAa;AAI7D,qBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;IAClB,EAAE;;EAGL,MAAM,gBAAgB,IAAI,qBACxB,yBACA,gBACD;AAGD,MACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,GAE3C,eAAc,QAAQ,SAAS,QAAQ;AAGzC,eAAa;AACX,iBAAc,YAAY;AAC1B,OAAI,aACF,eAAc,oBAAoB,UAAU,aAAa;;IAG5D;EACD;EACA,cAAc;EACd,eAAe;EACf;EACA;EACD,CAAC;CAEF,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,cAAc,KAAK;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;AAEzB,MAAI,sBAAsB,IAAI,CAAC,CAAC,mBAC9B,sBAAqB;WACZ,sBAAsB,IAAI,CAAC,CAAC,mBACrC,sBAAqB;AAGvB,SAAO,GAAG,QAAQ,GAAG,mBAAmB;;AAG1C,KAAI,QAAS,QAAO;CAEpB,MAAM,iBACJ,wBAAA,cAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,yBAAyB;EAC7C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;EAYK,EAVN,wBAAA,cAAC,eAAD;EACS;EACG;EACV,UAAU,cAAc;EACxB,cAAc,cAAc;EAC5B,WAAW,cAAc;EACzB,wBAAwB,cAAc;EACtC,aAAa,cAAc;EAC3B,CAAA,EACF,wBAAA,cAAC,eAAD;EAAwB;EAAoB;EAAa,CAAA,CACnD;AAGV,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,kBAAA,KAAmB,EACnB,gBACC,wBAAA,cAAC,gBAAD,EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,kBAC9C,EAGc,EADd,eACc,GAEjB,eAED"}
|
|
@@ -36,11 +36,14 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
|
|
|
36
36
|
sortableIds: rowIds
|
|
37
37
|
}, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), /* @__PURE__ */ React$1.createElement(Table, {
|
|
38
38
|
...props,
|
|
39
|
-
className: cn(
|
|
39
|
+
className: cn(isPending && [
|
|
40
40
|
"opacity-50",
|
|
41
41
|
"pointer-events-none",
|
|
42
|
-
"transition-opacity,
|
|
43
|
-
|
|
42
|
+
"transition-opacity",
|
|
43
|
+
"duration-250",
|
|
44
|
+
"linear",
|
|
45
|
+
"delay-150"
|
|
46
|
+
], className)
|
|
44
47
|
}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
|
|
45
48
|
theme,
|
|
46
49
|
sortable
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n className?: string\n idColumn?: string\n onDragAndDrop?: (onDragAndDropData: {\n oldIndex: number\n newIndex: number\n newData: TAsyncDataResult\n }) => void\n}\n\nexport const DragAndDropTable = ({\n idColumn = 'id',\n onDragAndDrop,\n sortable,\n striped,\n theme,\n className,\n ...props\n}: DragAndDropTableProps) => {\n const { asyncDataState, data, setData } = useDataTable()\n const isPending = asyncDataState === AsyncDataState.PENDING\n\n const rowIds = React.useMemo(\n () =>\n data.results.map((row) => {\n return row[idColumn] as React.ReactText\n }),\n [data]\n )\n const handleSortChange = React.useCallback(\n ({ oldIndex, newIndex }) => {\n const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n const newData = { results: sortedResults, total: data.total }\n setData({ results: sortedResults, total: data.total })\n onDragAndDrop?.({ oldIndex, newIndex, newData })\n },\n [data, onDragAndDrop]\n )\n\n return (\n <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n <DataTableLoading />\n <Table\n {...props}\n className={cn(\n
|
|
1
|
+
{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n className?: string\n idColumn?: string\n onDragAndDrop?: (onDragAndDropData: {\n oldIndex: number\n newIndex: number\n newData: TAsyncDataResult\n }) => void\n}\n\nexport const DragAndDropTable = ({\n idColumn = 'id',\n onDragAndDrop,\n sortable,\n striped,\n theme,\n className,\n ...props\n}: DragAndDropTableProps) => {\n const { asyncDataState, data, setData } = useDataTable()\n const isPending = asyncDataState === AsyncDataState.PENDING\n\n const rowIds = React.useMemo(\n () =>\n data.results.map((row) => {\n return row[idColumn] as React.ReactText\n }),\n [data]\n )\n const handleSortChange = React.useCallback(\n ({ oldIndex, newIndex }) => {\n const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n const newData = { results: sortedResults, total: data.total }\n setData({ results: sortedResults, total: data.total })\n onDragAndDrop?.({ oldIndex, newIndex, newData })\n },\n [data, onDragAndDrop]\n )\n\n return (\n <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n <DataTableLoading />\n <Table\n {...props}\n className={cn(\n isPending && [\n 'opacity-50',\n 'pointer-events-none',\n 'transition-opacity',\n 'duration-250',\n 'linear',\n 'delay-150'\n ],\n className\n )}\n >\n <DataTableHead theme={theme} sortable={sortable} />\n <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n </Table>\n </Sortable.Root>\n )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAmB5C,EAlBd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}
|
|
@@ -106,7 +106,7 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
|
|
|
106
106
|
hasTooltip: false,
|
|
107
107
|
size: "md",
|
|
108
108
|
theme: "neutral",
|
|
109
|
-
className: "
|
|
109
|
+
className: "top-safe-offset-4 right-safe-offset-4 absolute size-12"
|
|
110
110
|
}, /* @__PURE__ */ React$1.createElement(Icon, { is: Close })), React$1.Children.map(children, (child) => child?.type !== DialogBackground && child))));
|
|
111
111
|
//#endregion
|
|
112
112
|
export { DialogContent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"
|
|
1
|
+
{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n Content,\n {\n base: [\n // `transform: translate()` is required for `floating-ui` to\n // correctly position elements within the Dialog component.\n // we can't use the translate property directly\n 'transform-[translate(-50%,-50%)]',\n 'bg-white',\n 'shadow-xl',\n 'box-border',\n 'left-1/2',\n 'h-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'overflow-y-auto',\n 'rounded-md',\n 'p-8',\n 'fixed',\n 'top-1/2',\n 'z-1147483646',\n 'focus:outline-none',\n 'motion-safe:data-[state=open]:animate-slide-in-center',\n 'motion-safe:data-[state=closed]:animate-slide-out-center'\n ],\n variants: {\n size: {\n xs: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-95'\n ],\n sm: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-120'\n ],\n md: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-150'\n ],\n lg: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-200'\n ],\n xl: [\n 'rounded-md',\n 'size-auto',\n 'max-w-[90vw]',\n 'max-h-[90vh]',\n 'supports-svh:h-auto',\n 'supports-svh:max-h-[90vh]',\n 'w-275'\n ],\n fullscreen: [\n 'rounded-none',\n 'w-screen',\n 'h-screen',\n 'max-w-screen',\n 'max-h-screen',\n 'supports-svh:h-svh',\n 'supports-svh:max-h-svh'\n ]\n },\n layout: {\n panel: ['flex', 'flex-col', 'p-0']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}: DialogContentProps) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n className=\"top-safe-offset-4 right-safe-offset-4 absolute size-12\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"mappings":";;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,iBACP,CAAC;AAEF,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACD,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;GAAM,EACnC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,qBAEH,wBAAA,cAAC,QAAA,MACC,wBAAA,cAAC,qBAAD,EAAqB,IAAI,gBAmCH,EAlCnB,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,EACD,wBAAA,cAAC,qBAAD;CACQ;CACN,cAAW;CACX,uBAAuB,UAAU;AAE/B,MADgB,MAAM,QACT,OAAO,eAClB,OAAM,gBAAgB;;CAG1B,GAAI;CAmBgB,EAjBnB,mBACC,wBAAA,cAAC,YAAD;CACE,IAAI;CACJ,OAAO;CACP,YAAY;CACZ,MAAK;CACL,OAAM;CACN,WAAU;CAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAa,CAAA,CACZ,EAEd,QAAM,SAAS,IACd,WACC,UACC,OAAO,SAAS,oBAAoB,MACvC,CACmB,CACF,CACf"}
|
|
@@ -7,9 +7,8 @@ export declare const DropdownMenu: React.FC<import("@radix-ui/react-dropdown-men
|
|
|
7
7
|
Item: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, never> & {
|
|
8
8
|
as?: React.ElementType;
|
|
9
9
|
}>;
|
|
10
|
-
LinkItem: ({ children, href,
|
|
10
|
+
LinkItem: ({ children, href, ...props }: React.ComponentProps<typeof DropdownMenuItem> & {
|
|
11
11
|
href: string;
|
|
12
|
-
reloadDocument?: boolean;
|
|
13
12
|
}) => React.JSX.Element;
|
|
14
13
|
Portal: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuPortalProps>;
|
|
15
14
|
Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, never> & {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownMenuItem } from './DropdownMenuItem';
|
|
3
|
-
export declare const DropdownMenuLinkItem: ({ children, href,
|
|
3
|
+
export declare const DropdownMenuLinkItem: ({ children, href, ...props }: React.ComponentProps<typeof DropdownMenuItem> & {
|
|
4
4
|
href: string;
|
|
5
|
-
reloadDocument?: boolean;
|
|
6
5
|
}) => React.JSX.Element;
|
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
3
|
-
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
4
3
|
import { DropdownMenuItem } from "./DropdownMenuItem.js";
|
|
5
4
|
import React from "react";
|
|
6
5
|
//#region src/components/dropdown-menu/DropdownMenuLinkItem.tsx
|
|
7
6
|
var StyledLink = styled("a", { base: ["no-underline"] });
|
|
8
|
-
var DropdownMenuLinkItem = ({ children, href,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
role: "menuitem",
|
|
17
|
-
...getExternalAnchorProps(href)
|
|
18
|
-
}, children));
|
|
19
|
-
};
|
|
7
|
+
var DropdownMenuLinkItem = ({ children, href, ...props }) => /* @__PURE__ */ React.createElement(DropdownMenuItem, {
|
|
8
|
+
...props,
|
|
9
|
+
asChild: true
|
|
10
|
+
}, /* @__PURE__ */ React.createElement(StyledLink, {
|
|
11
|
+
href,
|
|
12
|
+
role: "menuitem",
|
|
13
|
+
...getExternalAnchorProps(href)
|
|
14
|
+
}, children));
|
|
20
15
|
//#endregion
|
|
21
16
|
export { DropdownMenuLinkItem };
|
|
22
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport {
|
|
1
|
+
{"version":3,"file":"DropdownMenuLinkItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLinkItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nimport { DropdownMenuItem } from './DropdownMenuItem'\n\nconst StyledLink = styled('a', {\n base: ['no-underline']\n})\n\nexport const DropdownMenuLinkItem = ({\n children,\n href,\n ...props\n}: React.ComponentProps<typeof DropdownMenuItem> & { href: string }) => (\n <DropdownMenuItem {...props} asChild>\n <StyledLink href={href} role=\"menuitem\" {...getExternalAnchorProps(href)}>\n {children}\n </StyledLink>\n </DropdownMenuItem>\n)\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OAAO,KAAK,EAC7B,MAAM,CAAC,eAAe,EACvB,CAAC;AAEF,IAAa,wBAAwB,EACnC,UACA,MACA,GAAG,YAEH,sBAAA,cAAC,kBAAD;CAAkB,GAAI;CAAO,SAAA;CAIV,EAHjB,sBAAA,cAAC,YAAD;CAAkB;CAAM,MAAK;CAAW,GAAI,uBAAuB,KAAK;CAE3D,EADV,SACU,CACI"}
|
|
@@ -62,13 +62,14 @@ export { RadioButton } from './radio-button/RadioButton';
|
|
|
62
62
|
export { RadioButtonGroup } from './radio-button/RadioButtonGroup';
|
|
63
63
|
export { RadioButtonField } from './radio-button-field/RadioButtonField';
|
|
64
64
|
export { RadioCard } from './radio-card/RadioCard';
|
|
65
|
-
export { RouterProvider } from './router-provider/RouterProvider';
|
|
66
65
|
export { RadioCardGroup } from './radio-card/RadioCardGroup';
|
|
67
66
|
export { SearchField } from './search-field/SearchField';
|
|
68
67
|
export { SearchInput } from './search-input/SearchInput';
|
|
69
68
|
export { SectionMessage } from './section-message/SectionMessage';
|
|
70
69
|
export { Select } from './select/Select';
|
|
71
70
|
export { SelectField } from './select-field/SelectField';
|
|
71
|
+
export { SelectMenu } from './select-menu/SelectMenu';
|
|
72
|
+
export { SelectMenuField } from './select-menu-field/SelectMenuField';
|
|
72
73
|
export { SideBar } from './side-bar/SideBar';
|
|
73
74
|
export { useSidebarState } from './side-bar/SideBarContext';
|
|
74
75
|
export { Slider } from './slider/Slider';
|
|
@@ -11,7 +11,6 @@ export declare const StyledLink: React.ForwardRefExoticComponent<Omit<Omit<React
|
|
|
11
11
|
}>;
|
|
12
12
|
type LinkProps = Override<React.ComponentProps<typeof StyledLink>, NavigatorActions & {
|
|
13
13
|
disabled?: boolean;
|
|
14
|
-
reloadDocument?: boolean;
|
|
15
14
|
}>;
|
|
16
15
|
export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
17
16
|
export {};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { styled } from "../../styled.js";
|
|
2
2
|
import { getExternalAnchorProps } from "../../utilities/uri/index.js";
|
|
3
|
-
import { useRouterLinkProps } from "../router-provider/RouterProvider.js";
|
|
4
3
|
import * as React$1 from "react";
|
|
5
4
|
//#region src/components/link/Link.tsx
|
|
6
5
|
var StyledLink = styled("a", {
|
|
@@ -54,18 +53,15 @@ var StyledLink = styled("a", {
|
|
|
54
53
|
},
|
|
55
54
|
defaultVariants: { size: "md" }
|
|
56
55
|
}, { enabledResponsiveVariants: true });
|
|
57
|
-
var Link = React$1.forwardRef(({ as, disabled, href,
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
ref
|
|
67
|
-
});
|
|
68
|
-
});
|
|
56
|
+
var Link = React$1.forwardRef(({ as, disabled, href, ...rest }, ref) => /* @__PURE__ */ React$1.createElement(StyledLink, {
|
|
57
|
+
as: as || (!href ? "button" : void 0),
|
|
58
|
+
noCapsize: !href ? true : void 0,
|
|
59
|
+
href,
|
|
60
|
+
...disabled && { disabled: true },
|
|
61
|
+
...rest,
|
|
62
|
+
...getExternalAnchorProps(href),
|
|
63
|
+
ref
|
|
64
|
+
}));
|
|
69
65
|
Link.displayName = "Link";
|
|
70
66
|
//#endregion
|
|
71
67
|
export { Link, StyledLink };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\
|
|
1
|
+
{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types/navigatorActions.types'\nimport { Override } from '~/utilities/types'\nimport { getExternalAnchorProps } from '~/utilities/uri'\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 { enabledResponsiveVariants: true }\n)\n\ntype LinkProps = Override<\n React.ComponentProps<typeof StyledLink>,\n NavigatorActions & { disabled?: boolean }\n>\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n ({ as, disabled, href, ...rest }, ref) => (\n <StyledLink\n as={as || (!href ? 'button' : undefined)}\n noCapsize={!href ? true : undefined}\n href={href}\n {...(disabled && { disabled: true })}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref as any}\n />\n )\n)\n\nLink.displayName = 'Link'\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;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;IAAmB;GACpD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACrD,IAAI;IAAC;IAAW;IAAkB;IAAmB;GACtD;EACD,WAAW,EACT,MAAM,CAAC,eAAe,EACvB;EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAOD,IAAa,OAAO,QAAM,YACvB,EAAE,IAAI,UAAU,MAAM,GAAG,QAAQ,QAChC,wBAAA,cAAC,YAAD;CACE,IAAI,OAAO,CAAC,OAAO,WAAW,KAAA;CAC9B,WAAW,CAAC,OAAO,OAAO,KAAA;CACpB;CACN,GAAK,YAAY,EAAE,UAAU,MAAM;CACnC,GAAI;CACJ,GAAI,uBAAuB,KAAK;CAC3B;CACL,CAAA,CAEL;AAED,KAAK,cAAc"}
|
|
@@ -18,7 +18,6 @@ export declare const NavigationMenu: {
|
|
|
18
18
|
} & {
|
|
19
19
|
as?: React.ElementType;
|
|
20
20
|
}>>["elementType"];
|
|
21
|
-
reloadDocument?: boolean;
|
|
22
21
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
23
22
|
Dropdown: {
|
|
24
23
|
({ children, id, ...props }: {
|
|
@@ -45,7 +44,6 @@ export declare const NavigationMenu: {
|
|
|
45
44
|
} & {
|
|
46
45
|
as?: React.ElementType;
|
|
47
46
|
}>>["elementType"];
|
|
48
|
-
reloadDocument?: boolean;
|
|
49
47
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
50
48
|
DropdownItemTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
51
49
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
@@ -10,7 +10,6 @@ export declare const NavigationMenuDropdownItem: React.ForwardRefExoticComponent
|
|
|
10
10
|
} & {
|
|
11
11
|
as?: React.ElementType;
|
|
12
12
|
}>>["elementType"];
|
|
13
|
-
reloadDocument?: boolean;
|
|
14
13
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
15
14
|
export declare const NavigationMenuDropdownItemTitle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
|
|
16
15
|
ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
|
|
@@ -12,6 +12,5 @@ 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;
|
|
16
15
|
}, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
17
16
|
export {};
|