@raystack/apsara 0.53.0 → 0.53.2
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/dialog/dialog.cjs +23 -14
- package/dist/components/dialog/dialog.cjs.map +1 -1
- package/dist/components/dialog/dialog.d.ts +1 -0
- package/dist/components/dialog/dialog.d.ts.map +1 -1
- package/dist/components/dialog/dialog.js +12 -3
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/hooks/index.cjs +2 -0
- package/dist/hooks/index.cjs.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useDebouncedState.cjs +41 -0
- package/dist/hooks/useDebouncedState.cjs.map +1 -0
- package/dist/hooks/useDebouncedState.d.ts +28 -0
- package/dist/hooks/useDebouncedState.d.ts.map +1 -0
- package/dist/hooks/useDebouncedState.js +39 -0
- package/dist/hooks/useDebouncedState.js.map +1 -0
- package/package.json +1 -1
|
@@ -2,34 +2,43 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
|
|
5
|
-
var index
|
|
5
|
+
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var flex = require('../flex/flex.cjs');
|
|
8
8
|
var dialog_module = require('./dialog.module.css.cjs');
|
|
9
|
-
var index = require('../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.14_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1._i7gyttlqowrnok6rwi63tbbmni/node_modules/@radix-ui/react-dialog/dist/index.cjs');
|
|
9
|
+
var index$1 = require('../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.14_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1._i7gyttlqowrnok6rwi63tbbmni/node_modules/@radix-ui/react-dialog/dist/index.cjs');
|
|
10
10
|
|
|
11
|
-
const dialogContent = index
|
|
12
|
-
const DialogContent = React.forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
const dialogContent = index.cva(dialog_module.default.dialogContent);
|
|
12
|
+
const DialogContent = React.forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, scrollableOverlay = false, ...props }, ref) => {
|
|
13
|
+
const overlayProps = {
|
|
14
|
+
className: index.cx(dialog_module.default.dialogOverlay, overlayClassName, overlayBlur && dialog_module.default.overlayBlur),
|
|
15
|
+
style: overlayStyle,
|
|
16
|
+
'aria-hidden': 'true',
|
|
17
|
+
role: 'presentation'
|
|
18
|
+
};
|
|
19
|
+
const content = (jsxRuntime.jsx(index$1.Content, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? 'dialog-description' : undefined, ...props, children: children }));
|
|
20
|
+
return (jsxRuntime.jsx(index$1.Portal, { children: scrollableOverlay ? (jsxRuntime.jsx(index$1.Overlay, { ...overlayProps, children: content })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$1.Overlay, { ...overlayProps }), content] })) }));
|
|
21
|
+
});
|
|
22
|
+
DialogContent.displayName = index$1.Content.displayName;
|
|
23
|
+
const DialogHeader = ({ children, className }) => (jsxRuntime.jsx(flex.Flex, { justify: 'between', align: 'center', className: index.cx(dialog_module.default.header, className), children: children }));
|
|
24
|
+
const DialogFooter = ({ children, className }) => (jsxRuntime.jsx(flex.Flex, { gap: 5, justify: 'end', className: index.cx(dialog_module.default.footer, className), children: children }));
|
|
25
|
+
const DialogBody = ({ children, className }) => (jsxRuntime.jsx(flex.Flex, { direction: 'column', gap: 3, className: index.cx(dialog_module.default.body, className), children: children }));
|
|
17
26
|
function CloseButton({ className, ...props }) {
|
|
18
|
-
return (jsxRuntime.jsx(index.Close, { className: index
|
|
27
|
+
return (jsxRuntime.jsx(index$1.Close, { className: index.cx(dialog_module.default.close, className), "aria-label": 'Close dialog', ...props, children: jsxRuntime.jsx(reactIcons_esm.Cross1Icon, {}) }));
|
|
19
28
|
}
|
|
20
29
|
function DialogTitle({ children, className, ...props }) {
|
|
21
|
-
return (jsxRuntime.jsx(index.Title, { ...props, role: 'heading', "aria-level": 1, className: index
|
|
30
|
+
return (jsxRuntime.jsx(index$1.Title, { ...props, role: 'heading', "aria-level": 1, className: index.cx(dialog_module.default.title, className), children: children }));
|
|
22
31
|
}
|
|
23
32
|
function DialogDescription({ children, className, ...props }) {
|
|
24
|
-
return (jsxRuntime.jsx(index.Description, { ...props, className: index
|
|
33
|
+
return (jsxRuntime.jsx(index$1.Description, { ...props, className: index.cx(dialog_module.default.description, className), id: 'dialog-description', role: 'document', children: children }));
|
|
25
34
|
}
|
|
26
|
-
const Dialog = Object.assign(index.Root, {
|
|
27
|
-
Trigger: index.Trigger,
|
|
35
|
+
const Dialog = Object.assign(index$1.Root, {
|
|
36
|
+
Trigger: index$1.Trigger,
|
|
28
37
|
Content: DialogContent,
|
|
29
38
|
Header: DialogHeader,
|
|
30
39
|
Footer: DialogFooter,
|
|
31
40
|
Body: DialogBody,
|
|
32
|
-
Close: index.Close,
|
|
41
|
+
Close: index$1.Close,
|
|
33
42
|
CloseButton: CloseButton,
|
|
34
43
|
Title: DialogTitle,
|
|
35
44
|
Description: DialogDescription
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.cjs","sources":["../../../components/dialog/dialog.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef\n} from 'react';\nimport { Flex } from '../flex';\nimport styles from './dialog.module.css';\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) =>
|
|
1
|
+
{"version":3,"file":"dialog.cjs","sources":["../../../components/dialog/dialog.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef\n} from 'react';\nimport { Flex } from '../flex';\nimport styles from './dialog.module.css';\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n scrollableOverlay?: boolean;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n scrollableOverlay = false,\n ...props\n },\n ref\n ) => {\n const overlayProps: DialogPrimitive.DialogOverlayProps = {\n className: cx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n ),\n style: overlayStyle,\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n const content = (\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? 'dialog-description' : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n );\n return (\n <DialogPrimitive.Portal>\n {scrollableOverlay ? (\n <DialogPrimitive.Overlay {...overlayProps}>\n {content}\n </DialogPrimitive.Overlay>\n ) : (\n <>\n <DialogPrimitive.Overlay {...overlayProps} />\n {content}\n </>\n )}\n </DialogPrimitive.Portal>\n );\n }\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify='between'\n align='center'\n className={cx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify='end' className={cx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction='column' gap={3} className={cx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={cx(styles.close, className)}\n aria-label='Close dialog'\n {...props}\n >\n <Cross1Icon />\n </DialogPrimitive.Close>\n );\n}\n\ninterface DialogTitleProps\n extends ComponentProps<typeof DialogPrimitive.Title> {\n children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n {...props}\n role='heading'\n aria-level={1}\n className={cx(styles.title, className)}\n >\n {children}\n </DialogPrimitive.Title>\n );\n}\n\ninterface DialogDescriptionProps\n extends ComponentProps<typeof DialogPrimitive.Description> {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction DialogDescription({\n children,\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n {...props}\n className={cx(styles.description, className)}\n id='dialog-description'\n role='document'\n >\n {children}\n </DialogPrimitive.Description>\n );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n Trigger: DialogPrimitive.Trigger,\n Content: DialogContent,\n Header: DialogHeader,\n Footer: DialogFooter,\n Body: DialogBody,\n Close: DialogPrimitive.Close,\n CloseButton: CloseButton,\n Title: DialogTitle,\n Description: DialogDescription\n});\n"],"names":["cva","styles","forwardRef","cx","_jsx","DialogPrimitive.Content","DialogPrimitive.Portal","DialogPrimitive.Overlay","_jsxs","_Fragment","Flex","DialogPrimitive.Close","Cross1Icon","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ export interface DialogContentProps extends ComponentPropsWithoutRef<typeof Dial
|
|
|
9
9
|
overlayClassName?: string;
|
|
10
10
|
overlayStyle?: React.CSSProperties;
|
|
11
11
|
width?: string | number;
|
|
12
|
+
scrollableOverlay?: boolean;
|
|
12
13
|
}
|
|
13
14
|
type CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;
|
|
14
15
|
export declare function CloseButton({ className, ...props }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../components/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,aAAa,oFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../components/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAW,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EACL,cAAc,EACd,wBAAwB,EAGzB,MAAM,OAAO,CAAC;AAIf,QAAA,MAAM,aAAa,oFAA4B,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuGD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AACrE,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAUpE;AAED,UAAU,gBACR,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAWvE;AAED,UAAU,sBACR,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,iBAAiB,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAWxB;AAED,eAAO,MAAM,MAAM;;;;kBA1FP,MAAM,SAAS;;;;kBAgBf,MAAM,SAAS;;;;kBAYf,MAAM,SAAS;;;;;;;CAwEzB,CAAC"}
|
|
@@ -1,13 +1,22 @@
|
|
|
1
|
-
import { jsxs,
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.1.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
|
|
3
3
|
import { cx, cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import { Flex } from '../flex/flex.js';
|
|
6
6
|
import styles from './dialog.module.css.js';
|
|
7
|
-
import { Portal, Overlay,
|
|
7
|
+
import { Content, Portal, Overlay, Root, Trigger, Close, Title, Description } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.14_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1._i7gyttlqowrnok6rwi63tbbmni/node_modules/@radix-ui/react-dialog/dist/index.js';
|
|
8
8
|
|
|
9
9
|
const dialogContent = cva(styles.dialogContent);
|
|
10
|
-
const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width,
|
|
10
|
+
const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, scrollableOverlay = false, ...props }, ref) => {
|
|
11
|
+
const overlayProps = {
|
|
12
|
+
className: cx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur),
|
|
13
|
+
style: overlayStyle,
|
|
14
|
+
'aria-hidden': 'true',
|
|
15
|
+
role: 'presentation'
|
|
16
|
+
};
|
|
17
|
+
const content = (jsx(Content, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? 'dialog-description' : undefined, ...props, children: children }));
|
|
18
|
+
return (jsx(Portal, { children: scrollableOverlay ? (jsx(Overlay, { ...overlayProps, children: content })) : (jsxs(Fragment, { children: [jsx(Overlay, { ...overlayProps }), content] })) }));
|
|
19
|
+
});
|
|
11
20
|
DialogContent.displayName = Content.displayName;
|
|
12
21
|
const DialogHeader = ({ children, className }) => (jsx(Flex, { justify: 'between', align: 'center', className: cx(styles.header, className), children: children }));
|
|
13
22
|
const DialogFooter = ({ children, className }) => (jsx(Flex, { gap: 5, justify: 'end', className: cx(styles.footer, className), children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sources":["../../../components/dialog/dialog.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef\n} from 'react';\nimport { Flex } from '../flex';\nimport styles from './dialog.module.css';\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n ...props\n },\n ref\n ) =>
|
|
1
|
+
{"version":3,"file":"dialog.js","sources":["../../../components/dialog/dialog.tsx"],"sourcesContent":["import { Cross1Icon } from '@radix-ui/react-icons';\nimport { VariantProps, cva, cx } from 'class-variance-authority';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport {\n ComponentProps,\n ComponentPropsWithoutRef,\n ElementRef,\n forwardRef\n} from 'react';\nimport { Flex } from '../flex';\nimport styles from './dialog.module.css';\n\nconst dialogContent = cva(styles.dialogContent);\n\nexport interface DialogContentProps\n extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n VariantProps<typeof dialogContent> {\n ariaLabel?: string;\n ariaDescription?: string;\n overlayBlur?: boolean;\n overlayClassName?: string;\n overlayStyle?: React.CSSProperties;\n width?: string | number;\n scrollableOverlay?: boolean;\n}\n\nconst DialogContent = forwardRef<\n ElementRef<typeof DialogPrimitive.Content>,\n DialogContentProps\n>(\n (\n {\n className,\n children,\n ariaLabel,\n ariaDescription,\n overlayBlur = false,\n overlayClassName,\n overlayStyle,\n width,\n scrollableOverlay = false,\n ...props\n },\n ref\n ) => {\n const overlayProps: DialogPrimitive.DialogOverlayProps = {\n className: cx(\n styles.dialogOverlay,\n overlayClassName,\n overlayBlur && styles.overlayBlur\n ),\n style: overlayStyle,\n 'aria-hidden': 'true',\n role: 'presentation'\n };\n\n const content = (\n <DialogPrimitive.Content\n ref={ref}\n className={dialogContent({ className })}\n style={{ width, ...props.style }}\n aria-label={ariaLabel}\n aria-describedby={ariaDescription ? 'dialog-description' : undefined}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n );\n return (\n <DialogPrimitive.Portal>\n {scrollableOverlay ? (\n <DialogPrimitive.Overlay {...overlayProps}>\n {content}\n </DialogPrimitive.Overlay>\n ) : (\n <>\n <DialogPrimitive.Overlay {...overlayProps} />\n {content}\n </>\n )}\n </DialogPrimitive.Portal>\n );\n }\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nconst DialogHeader = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex\n justify='between'\n align='center'\n className={cx(styles.header, className)}\n >\n {children}\n </Flex>\n);\n\nconst DialogFooter = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex gap={5} justify='end' className={cx(styles.footer, className)}>\n {children}\n </Flex>\n);\n\nconst DialogBody = ({\n children,\n className\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n <Flex direction='column' gap={3} className={cx(styles.body, className)}>\n {children}\n </Flex>\n);\n\ntype CloseButtonProps = ComponentProps<typeof DialogPrimitive.Close>;\nexport function CloseButton({ className, ...props }: CloseButtonProps) {\n return (\n <DialogPrimitive.Close\n className={cx(styles.close, className)}\n aria-label='Close dialog'\n {...props}\n >\n <Cross1Icon />\n </DialogPrimitive.Close>\n );\n}\n\ninterface DialogTitleProps\n extends ComponentProps<typeof DialogPrimitive.Title> {\n children: React.ReactNode;\n}\n\nfunction DialogTitle({ children, className, ...props }: DialogTitleProps) {\n return (\n <DialogPrimitive.Title\n {...props}\n role='heading'\n aria-level={1}\n className={cx(styles.title, className)}\n >\n {children}\n </DialogPrimitive.Title>\n );\n}\n\ninterface DialogDescriptionProps\n extends ComponentProps<typeof DialogPrimitive.Description> {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction DialogDescription({\n children,\n className,\n ...props\n}: DialogDescriptionProps) {\n return (\n <DialogPrimitive.Description\n {...props}\n className={cx(styles.description, className)}\n id='dialog-description'\n role='document'\n >\n {children}\n </DialogPrimitive.Description>\n );\n}\n\nexport const Dialog = Object.assign(DialogPrimitive.Root, {\n Trigger: DialogPrimitive.Trigger,\n Content: DialogContent,\n Header: DialogHeader,\n Footer: DialogFooter,\n Body: DialogBody,\n Close: DialogPrimitive.Close,\n CloseButton: CloseButton,\n Title: DialogTitle,\n Description: DialogDescription\n});\n"],"names":["_jsx","DialogPrimitive.Content","DialogPrimitive.Portal","DialogPrimitive.Overlay","_jsxs","_Fragment","DialogPrimitive.Close","DialogPrimitive.Title","DialogPrimitive.Description","DialogPrimitive.Root","DialogPrimitive.Trigger"],"mappings":"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"}
|
package/dist/hooks/index.cjs
CHANGED
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
var useCopyToClipboard = require('./useCopyToClipboard.cjs');
|
|
4
4
|
var useMouse = require('./useMouse.cjs');
|
|
5
5
|
var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs');
|
|
6
|
+
var useDebouncedState = require('./useDebouncedState.cjs');
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
|
|
9
10
|
exports.useCopyToClipboard = useCopyToClipboard.useCopyToClipboard;
|
|
10
11
|
exports.useMouse = useMouse.useMouse;
|
|
11
12
|
exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
|
|
13
|
+
exports.useDebouncedState = useDebouncedState.useDebouncedState;
|
|
12
14
|
//# sourceMappingURL=index.cjs.map
|
package/dist/hooks/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { useCopyToClipboard } from './useCopyToClipboard.js';
|
|
2
2
|
export { useMouse } from './useMouse.js';
|
|
3
3
|
export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
|
|
4
|
+
export { useDebouncedState } from './useDebouncedState.js';
|
|
4
5
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* A hook that debounces the state update.
|
|
7
|
+
* @param defaultValue - The default value of the state.
|
|
8
|
+
* @param delay - The delay time in milliseconds.
|
|
9
|
+
* @param options - The options for the hook.
|
|
10
|
+
* @returns A tuple containing the current value and the debounced set value function.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000);
|
|
14
|
+
|
|
15
|
+
* @example
|
|
16
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
|
|
17
|
+
*/
|
|
18
|
+
function useDebouncedState(defaultValue, delay, options = { leading: false }) {
|
|
19
|
+
const [value, setValue] = react.useState(defaultValue);
|
|
20
|
+
const timeoutRef = react.useRef(null);
|
|
21
|
+
const leadingRef = react.useRef(true);
|
|
22
|
+
const clearTimeout = react.useCallback(() => window.clearTimeout(timeoutRef.current), []);
|
|
23
|
+
react.useEffect(() => clearTimeout, [clearTimeout]);
|
|
24
|
+
const debouncedSetValue = react.useCallback((newValue) => {
|
|
25
|
+
clearTimeout();
|
|
26
|
+
if (leadingRef.current && options.leading) {
|
|
27
|
+
setValue(newValue);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
31
|
+
leadingRef.current = true;
|
|
32
|
+
setValue(newValue);
|
|
33
|
+
}, delay);
|
|
34
|
+
}
|
|
35
|
+
leadingRef.current = false;
|
|
36
|
+
}, [options.leading, clearTimeout, delay]);
|
|
37
|
+
return [value, debouncedSetValue];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
exports.useDebouncedState = useDebouncedState;
|
|
41
|
+
//# sourceMappingURL=useDebouncedState.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebouncedState.cjs","sources":["../../hooks/useDebouncedState.tsx"],"sourcesContent":["import {\n SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nexport interface UseDebouncedStateOptions {\n /**\n * If `true`, the state will be updated immediately on the first call (leading edge).\n * Subsequent calls within the delay period will be debounced.\n * @default false\n */\n leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [\n T,\n (newValue: SetStateAction<T>) => void\n];\n\n/**\n * A hook that debounces the state update.\n * @param defaultValue - The default value of the state.\n * @param delay - The delay time in milliseconds.\n * @param options - The options for the hook.\n * @returns A tuple containing the current value and the debounced set value function.\n *\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000);\n\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });\n */\nexport function useDebouncedState<T = any>(\n defaultValue: T,\n delay: number,\n options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n const [value, setValue] = useState(defaultValue);\n const timeoutRef = useRef<number | null>(null);\n const leadingRef = useRef(true);\n\n const clearTimeout = useCallback(\n () => window.clearTimeout(timeoutRef.current!),\n []\n );\n useEffect(() => clearTimeout, [clearTimeout]);\n\n const debouncedSetValue = useCallback(\n (newValue: SetStateAction<T>) => {\n clearTimeout();\n if (leadingRef.current && options.leading) {\n setValue(newValue);\n } else {\n timeoutRef.current = window.setTimeout(() => {\n leadingRef.current = true;\n setValue(newValue);\n }, delay);\n }\n leadingRef.current = false;\n },\n [options.leading, clearTimeout, delay]\n );\n\n return [value, debouncedSetValue] as const;\n}\n"],"names":["useState","useRef","useCallback","useEffect"],"mappings":";;;;AAsBA;;;;;;;;;;;;AAYG;AACa,SAAA,iBAAiB,CAC/B,YAAe,EACf,KAAa,EACb,OAAA,GAAoC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAA;IAEtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAGC,YAAM,CAAgB,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAEhC,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAQ,CAAC,EAC9C,EAAE,CACH,CAAC;IACFC,eAAS,CAAC,MAAM,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAGD,iBAAW,CACnC,CAAC,QAA2B,KAAI;AAC9B,QAAA,YAAY,EAAE,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACzC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;aAAM;YACL,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AAC1C,gBAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACpB,EAAE,KAAK,CAAC,CAAC;SACX;AACD,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;KAC5B,EACD,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,CACvC,CAAC;AAEF,IAAA,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAU,CAAC;AAC7C;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SetStateAction } from 'react';
|
|
2
|
+
export interface UseDebouncedStateOptions {
|
|
3
|
+
/**
|
|
4
|
+
* If `true`, the state will be updated immediately on the first call (leading edge).
|
|
5
|
+
* Subsequent calls within the delay period will be debounced.
|
|
6
|
+
* @default false
|
|
7
|
+
*/
|
|
8
|
+
leading?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export type UseDebouncedStateReturnValue<T> = [
|
|
11
|
+
T,
|
|
12
|
+
(newValue: SetStateAction<T>) => void
|
|
13
|
+
];
|
|
14
|
+
/**
|
|
15
|
+
* A hook that debounces the state update.
|
|
16
|
+
* @param defaultValue - The default value of the state.
|
|
17
|
+
* @param delay - The delay time in milliseconds.
|
|
18
|
+
* @param options - The options for the hook.
|
|
19
|
+
* @returns A tuple containing the current value and the debounced set value function.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000);
|
|
23
|
+
|
|
24
|
+
* @example
|
|
25
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
|
|
26
|
+
*/
|
|
27
|
+
export declare function useDebouncedState<T = any>(defaultValue: T, delay: number, options?: UseDebouncedStateOptions): UseDebouncedStateReturnValue<T>;
|
|
28
|
+
//# sourceMappingURL=useDebouncedState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebouncedState.d.ts","sourceRoot":"","sources":["../../hooks/useDebouncedState.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAKf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,IAAI;IAC5C,CAAC;IACD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI;CACtC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EACvC,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,MAAM,EACb,OAAO,GAAE,wBAA6C,GACrD,4BAA4B,CAAC,CAAC,CAAC,CA4BjC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* A hook that debounces the state update.
|
|
5
|
+
* @param defaultValue - The default value of the state.
|
|
6
|
+
* @param delay - The delay time in milliseconds.
|
|
7
|
+
* @param options - The options for the hook.
|
|
8
|
+
* @returns A tuple containing the current value and the debounced set value function.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000);
|
|
12
|
+
|
|
13
|
+
* @example
|
|
14
|
+
* const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });
|
|
15
|
+
*/
|
|
16
|
+
function useDebouncedState(defaultValue, delay, options = { leading: false }) {
|
|
17
|
+
const [value, setValue] = useState(defaultValue);
|
|
18
|
+
const timeoutRef = useRef(null);
|
|
19
|
+
const leadingRef = useRef(true);
|
|
20
|
+
const clearTimeout = useCallback(() => window.clearTimeout(timeoutRef.current), []);
|
|
21
|
+
useEffect(() => clearTimeout, [clearTimeout]);
|
|
22
|
+
const debouncedSetValue = useCallback((newValue) => {
|
|
23
|
+
clearTimeout();
|
|
24
|
+
if (leadingRef.current && options.leading) {
|
|
25
|
+
setValue(newValue);
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
timeoutRef.current = window.setTimeout(() => {
|
|
29
|
+
leadingRef.current = true;
|
|
30
|
+
setValue(newValue);
|
|
31
|
+
}, delay);
|
|
32
|
+
}
|
|
33
|
+
leadingRef.current = false;
|
|
34
|
+
}, [options.leading, clearTimeout, delay]);
|
|
35
|
+
return [value, debouncedSetValue];
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { useDebouncedState };
|
|
39
|
+
//# sourceMappingURL=useDebouncedState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebouncedState.js","sources":["../../hooks/useDebouncedState.tsx"],"sourcesContent":["import {\n SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\n\nexport interface UseDebouncedStateOptions {\n /**\n * If `true`, the state will be updated immediately on the first call (leading edge).\n * Subsequent calls within the delay period will be debounced.\n * @default false\n */\n leading?: boolean;\n}\n\nexport type UseDebouncedStateReturnValue<T> = [\n T,\n (newValue: SetStateAction<T>) => void\n];\n\n/**\n * A hook that debounces the state update.\n * @param defaultValue - The default value of the state.\n * @param delay - The delay time in milliseconds.\n * @param options - The options for the hook.\n * @returns A tuple containing the current value and the debounced set value function.\n *\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000);\n\n * @example\n * const [value, setValue] = useDebouncedState('Hello', 1000, { leading: true });\n */\nexport function useDebouncedState<T = any>(\n defaultValue: T,\n delay: number,\n options: UseDebouncedStateOptions = { leading: false }\n): UseDebouncedStateReturnValue<T> {\n const [value, setValue] = useState(defaultValue);\n const timeoutRef = useRef<number | null>(null);\n const leadingRef = useRef(true);\n\n const clearTimeout = useCallback(\n () => window.clearTimeout(timeoutRef.current!),\n []\n );\n useEffect(() => clearTimeout, [clearTimeout]);\n\n const debouncedSetValue = useCallback(\n (newValue: SetStateAction<T>) => {\n clearTimeout();\n if (leadingRef.current && options.leading) {\n setValue(newValue);\n } else {\n timeoutRef.current = window.setTimeout(() => {\n leadingRef.current = true;\n setValue(newValue);\n }, delay);\n }\n leadingRef.current = false;\n },\n [options.leading, clearTimeout, delay]\n );\n\n return [value, debouncedSetValue] as const;\n}\n"],"names":[],"mappings":";;AAsBA;;;;;;;;;;;;AAYG;AACa,SAAA,iBAAiB,CAC/B,YAAe,EACf,KAAa,EACb,OAAA,GAAoC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAA;IAEtD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AACjD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;AAC/C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAEhC,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAQ,CAAC,EAC9C,EAAE,CACH,CAAC;IACF,SAAS,CAAC,MAAM,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAA2B,KAAI;AAC9B,QAAA,YAAY,EAAE,CAAC;QACf,IAAI,UAAU,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;YACzC,QAAQ,CAAC,QAAQ,CAAC,CAAC;SACpB;aAAM;YACL,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AAC1C,gBAAA,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,QAAQ,CAAC,QAAQ,CAAC,CAAC;aACpB,EAAE,KAAK,CAAC,CAAC;SACX;AACD,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;KAC5B,EACD,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,CACvC,CAAC;AAEF,IAAA,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAU,CAAC;AAC7C;;;;"}
|