@keboola/design 10.1.0 → 11.0.1

package/dist/Sheet-BQrX8-h5.js

@@ -0,0 +1,169 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { X } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-C76ke2eo.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Close, Content, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
+//#region src/components/Sheet/SheetBody.tsx
+const SheetBody = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	className: cn("tw:flex", "tw:flex-col", "tw:overflow-x-hidden", "tw:px-4", className)
+});
+//#endregion
+//#region src/components/Sheet/SheetOverlay.tsx
+const SheetOverlay = ({ ref, ...props }) => /* @__PURE__ */ jsx(ModalOverlay, {
+	ref,
+	...props
+});
+//#endregion
+//#region src/components/Sheet/SheetContent.tsx
+const sheetContentVariants = cva([
+	"tailwindcss-preflight",
+	"tw:fixed",
+	"tw:z-[1051]",
+	"tw:flex",
+	"tw:flex-col",
+	"tw:bg-card",
+	"tw:text-card-foreground",
+	"tw:shadow-lg",
+	"tw:data-[argo=true]:border",
+	"tw:data-[argo=true]:border-border",
+	"tw:data-[argo=true]:focus-visible:outline-hidden",
+	"tw:data-[argo=true]:focus-visible:ring-2",
+	"tw:data-[argo=true]:focus-visible:ring-ring/50",
+	"tw:ease-in-out",
+	"tw:data-[state=open]:duration-200",
+	"tw:data-[state=closed]:duration-200"
+], {
+	defaultVariants: {
+		side: "right",
+		disableTransition: false
+	},
+	variants: {
+		disableTransition: {
+			true: [],
+			false: ["tw:data-[state=open]:animate-in", "tw:data-[state=closed]:animate-out"]
+		},
+		side: {
+			top: [
+				"tw:inset-x-0",
+				"tw:top-0",
+				"tw:h-auto",
+				"tw:data-[state=closed]:slide-out-to-top",
+				"tw:data-[state=open]:slide-in-from-top",
+				"tw:data-[argo=true]:rounded-b-lg"
+			],
+			right: [
+				"tw:inset-y-0",
+				"tw:right-0",
+				"tw:h-full",
+				"tw:data-[state=closed]:slide-out-to-right",
+				"tw:data-[state=open]:slide-in-from-right",
+				"tw:data-[argo=true]:rounded-l-lg"
+			],
+			bottom: [
+				"tw:inset-x-0",
+				"tw:bottom-0",
+				"tw:h-auto",
+				"tw:data-[state=closed]:slide-out-to-bottom",
+				"tw:data-[state=open]:slide-in-from-bottom",
+				"tw:drop-shadow-2xl",
+				"tw:data-[argo=true]:rounded-t-lg"
+			],
+			left: [
+				"tw:inset-y-0",
+				"tw:left-0",
+				"tw:h-full",
+				"tw:data-[state=closed]:slide-out-to-left",
+				"tw:data-[state=open]:slide-in-from-left",
+				"tw:data-[argo=true]:rounded-r-lg"
+			]
+		}
+	}
+});
+const SheetContent = ({ className, children, side = "right", disableTransition = false, hideOverlay = false, keepOpenOnPointerDownOutside = false, onPointerDownOutside, onInteractOutside, container, ...props }) => {
+	const renderArgo = useArgoDesign();
+	const handleOnPointerDownOutside = (event) => {
+		if (keepOpenOnPointerDownOutside) event.preventDefault();
+		onPointerDownOutside?.(event);
+	};
+	const handleOnInteractOutside = (event) => {
+		if (keepOpenOnPointerDownOutside) event.preventDefault();
+		onInteractOutside?.(event);
+	};
+	return /* @__PURE__ */ jsxs(Portal, {
+		container,
+		children: [!hideOverlay && /* @__PURE__ */ jsx(SheetOverlay, { disableTransition: disableTransition ?? false }), /* @__PURE__ */ jsx(Content, {
+			...props,
+			/**
+			* Intentionally set undefined to avoid warning as suggested in docs, (https://www.radix-ui.com/primitives/docs/components/dialog#description)
+			* as of now we don't use modal description anywhere, if we decide to fix this issue, we fix it everywhere at once.
+			*/
+			"aria-describedby": void 0,
+			className: cn(sheetContentVariants({
+				side,
+				className,
+				disableTransition
+			})),
+			onPointerDownOutside: handleOnPointerDownOutside,
+			onInteractOutside: handleOnInteractOutside,
+			"data-side": side,
+			"data-argo": renderArgo,
+			children
+		})]
+	});
+};
+//#endregion
+//#region src/components/Sheet/SheetFooter.tsx
+const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4", className),
+	...props
+});
+//#endregion
+//#region src/components/Sheet/SheetHeader.tsx
+const SheetHeader = ({ className, children, hideCloseIcon = false, title, description, ...props }) => {
+	const isHeaderRendered = title || description || !hideCloseIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tw:flex", "tw:flex-col", "tw:gap-1.5", "tw:p-4", className),
+		...props,
+		children: [isHeaderRendered && /* @__PURE__ */ jsxs("div", {
+			className: "tw:flex tw:flex-col",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tw:flex tw:justify-end tw:gap-2",
+				children: [title && /* @__PURE__ */ jsx(ModalTitle, { children: title }), !hideCloseIcon && /* @__PURE__ */ jsx(Close, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						variant: "invisible",
+						size: "icon-sm",
+						children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
+							className: "tw:sr-only",
+							children: "Close"
+						})]
+					})
+				})]
+			}), description && /* @__PURE__ */ jsx(ModalDescription, { children: description })]
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/Sheet/SheetTitle.tsx
+const SheetTitle = ({ className, visuallyHidden = false, ...props }) => /* @__PURE__ */ jsx(Title, {
+	className: cn({ "tw:sr-only": visuallyHidden }, className),
+	...props
+});
+//#endregion
+//#region src/components/Sheet/Sheet.tsx
+const Sheet = (props) => /* @__PURE__ */ jsx(Root, { ...props });
+Sheet.Close = Close;
+Sheet.Trigger = Trigger;
+Sheet.Content = SheetContent;
+Sheet.Title = SheetTitle;
+Sheet.Header = SheetHeader;
+Sheet.Footer = SheetFooter;
+Sheet.Body = SheetBody;
+//#endregion
+export { Sheet };
+
+//# sourceMappingURL=Sheet-BQrX8-h5.js.map

package/dist/Sheet-BQrX8-h5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet-BQrX8-h5.js","names":[],"sources":["../src/components/Sheet/SheetBody.tsx","../src/components/Sheet/SheetOverlay.tsx","../src/components/Sheet/SheetContent.tsx","../src/components/Sheet/SheetFooter.tsx","../src/components/Sheet/SheetHeader.tsx","../src/components/Sheet/SheetTitle.tsx","../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetBody = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    className={cn('tw:flex', 'tw:flex-col', 'tw:overflow-x-hidden', 'tw:px-4', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ModalOverlay } from '../Modal/ModalOverlay';\n\ntype Props = ComponentProps<typeof ModalOverlay>;\n\n// Assuming it should have the same style as standard modal, if not remove the modal dependency and style it separately.\nexport const SheetOverlay = ({ ref, ...props }: Props) => <ModalOverlay ref={ref} {...props} />;\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { SheetOverlay } from './SheetOverlay';\n\nconst sheetContentVariants = cva(\n  [\n    // reset\n    'tailwindcss-preflight',\n\n    // positioning\n    'tw:fixed',\n\n    // Use standard tailwindcss class when, global override in tooltip.less file is removed.\n    'tw:z-[1051]',\n\n    'tw:flex',\n    'tw:flex-col',\n\n    'tw:bg-card',\n    'tw:text-card-foreground',\n    'tw:shadow-lg',\n\n    // argo chrome overrides\n    'tw:data-[argo=true]:border',\n    'tw:data-[argo=true]:border-border',\n    'tw:data-[argo=true]:focus-visible:outline-hidden',\n    'tw:data-[argo=true]:focus-visible:ring-2',\n    'tw:data-[argo=true]:focus-visible:ring-ring/50',\n\n    'tw:ease-in-out',\n    // opening animation\n    'tw:data-[state=open]:duration-200',\n\n    // close animation\n    'tw:data-[state=closed]:duration-200',\n  ],\n  {\n    defaultVariants: {\n      side: 'right',\n      disableTransition: false,\n    },\n    variants: {\n      disableTransition: {\n        true: [],\n        false: ['tw:data-[state=open]:animate-in', 'tw:data-[state=closed]:animate-out'],\n      },\n      side: {\n        top: [\n          'tw:inset-x-0',\n          'tw:top-0',\n          'tw:h-auto',\n          'tw:data-[state=closed]:slide-out-to-top',\n          'tw:data-[state=open]:slide-in-from-top',\n          'tw:data-[argo=true]:rounded-b-lg',\n        ],\n        right: [\n          'tw:inset-y-0',\n          'tw:right-0',\n          'tw:h-full',\n          'tw:data-[state=closed]:slide-out-to-right',\n          'tw:data-[state=open]:slide-in-from-right',\n          'tw:data-[argo=true]:rounded-l-lg',\n        ],\n\n        bottom: [\n          'tw:inset-x-0',\n          'tw:bottom-0',\n          'tw:h-auto',\n          'tw:data-[state=closed]:slide-out-to-bottom',\n          'tw:data-[state=open]:slide-in-from-bottom',\n          'tw:drop-shadow-2xl', // standard tailwindcss shadow is invisible for a bottom sheet because of positioning\n          'tw:data-[argo=true]:rounded-t-lg',\n        ],\n\n        left: [\n          'tw:inset-y-0',\n          'tw:left-0',\n          'tw:h-full',\n          'tw:data-[state=closed]:slide-out-to-left',\n          'tw:data-[state=open]:slide-in-from-left',\n          'tw:data-[argo=true]:rounded-r-lg',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<typeof Content> & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  hideOverlay?: boolean;\n  keepOpenOnPointerDownOutside?: boolean;\n} & VariantProps<typeof sheetContentVariants> &\n  Pick<ComponentProps<typeof Portal>, 'container'>;\n\nexport const SheetContent = ({\n  className,\n  children,\n  side = 'right',\n  disableTransition = false,\n  hideOverlay = false,\n  keepOpenOnPointerDownOutside = false,\n  onPointerDownOutside,\n  onInteractOutside,\n  container,\n  ...props\n}: Props) => {\n  const renderArgo = useArgoDesign();\n\n  const handleOnPointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (\n    event,\n  ) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onPointerDownOutside?.(event);\n  };\n\n  const handleOnInteractOutside: ComponentProps<typeof Content>['onInteractOutside'] = (event) => {\n    if (keepOpenOnPointerDownOutside) event.preventDefault();\n    onInteractOutside?.(event);\n  };\n\n  return (\n    <Portal container={container}>\n      {!hideOverlay && <SheetOverlay disableTransition={disableTransition ?? false} />}\n      <Content\n        {...props}\n        /**\n         * Intentionally set undefined to avoid warning as suggested in docs, (https://www.radix-ui.com/primitives/docs/components/dialog#description)\n         * as of now we don't use modal description anywhere, if we decide to fix this issue, we fix it everywhere at once.\n         */\n        aria-describedby={undefined}\n        className={cn(sheetContentVariants({ side, className, disableTransition }))}\n        onPointerDownOutside={handleOnPointerDownOutside}\n        onInteractOutside={handleOnInteractOutside}\n        data-side={side}\n        data-argo={renderArgo}\n      >\n        {children}\n      </Content>\n    </Portal>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetFooter = ({ className, ...props }: Props) => (\n  <div className={cn('tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4', className)} {...props} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { ModalDescription } from '../Modal/ModalDescription';\nimport { ModalTitle } from '../Modal/ModalTitle';\n\ntype Props = {\n  title?: ReactNode;\n  description?: ReactNode;\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\nexport const SheetHeader = ({\n  className,\n  children,\n  hideCloseIcon = false,\n  title,\n  description,\n  ...props\n}: Props) => {\n  const isHeaderRendered = title || description || !hideCloseIcon;\n\n  return (\n    <div className={cn('tw:flex', 'tw:flex-col', 'tw:gap-1.5', 'tw:p-4', className)} {...props}>\n      {isHeaderRendered && (\n        <div className=\"tw:flex tw:flex-col\">\n          <div className=\"tw:flex tw:justify-end tw:gap-2\">\n            {title && <ModalTitle>{title}</ModalTitle>}\n            {!hideCloseIcon && (\n              <Close asChild>\n                <Button variant=\"invisible\" size=\"icon-sm\">\n                  <X />\n                  <span className=\"tw:sr-only\">Close</span>\n                </Button>\n              </Close>\n            )}\n          </div>\n          {description && <ModalDescription>{description}</ModalDescription>}\n        </div>\n      )}\n\n      {children}\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title> & {\n  visuallyHidden?: boolean;\n};\n\nexport const SheetTitle = ({ className, visuallyHidden = false, ...props }: Props) => (\n  <Title className={cn({ 'tw:sr-only': visuallyHidden }, className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { SheetBody } from './SheetBody';\nimport { SheetContent } from './SheetContent';\nimport { SheetFooter } from './SheetFooter';\nimport { SheetHeader } from './SheetHeader';\nimport { SheetTitle } from './SheetTitle';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Sheet = (props: Props) => <Root {...props} />;\n\nSheet.Close = Close;\nSheet.Trigger = Trigger;\nSheet.Content = SheetContent;\nSheet.Title = SheetTitle;\n\nSheet.Header = SheetHeader;\nSheet.Footer = SheetFooter;\nSheet.Body = SheetBody;\n"],"mappings":"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"}