@economic/taco 1.1.10 → 1.1.12
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/esm/_virtual/_rollupPluginBabelHelpers.js +18 -1
- package/dist/esm/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/esm/components/Button/Button.js +13 -12
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Calendar/Calendar.js +71 -56
- package/dist/esm/components/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/Card/Card.js +15 -13
- package/dist/esm/components/Card/Card.js.map +1 -1
- package/dist/esm/components/Checkbox/Checkbox.js +18 -15
- package/dist/esm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/Combobox/Combobox.js +26 -23
- package/dist/esm/components/Combobox/Combobox.js.map +1 -1
- package/dist/esm/components/Datepicker/Datepicker.js +52 -48
- package/dist/esm/components/Datepicker/Datepicker.js.map +1 -1
- package/dist/esm/components/Dialog/Dialog.js +58 -39
- package/dist/esm/components/Dialog/Dialog.js.map +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js +1 -1
- package/dist/esm/components/Dialog/components/Trigger.js.map +1 -1
- package/dist/esm/components/Field/Field.js +12 -10
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/Form/Form.js +8 -6
- package/dist/esm/components/Form/Form.js.map +1 -1
- package/dist/esm/components/Hanger/Hanger.js +36 -28
- package/dist/esm/components/Hanger/Hanger.js.map +1 -1
- package/dist/esm/components/Popover/Popover.js +1 -1
- package/dist/esm/components/Popover/Popover.js.map +1 -1
- package/dist/esm/components/SearchInput/SearchInput.js +3 -0
- package/dist/esm/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/index.js +3 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/hooks/useDropTarget.js +10 -7
- package/dist/esm/utils/hooks/useDropTarget.js.map +1 -1
- package/dist/esm/utils/hooks/useProxiedRef.js +3 -3
- package/dist/esm/utils/hooks/useProxiedRef.js.map +1 -1
- package/dist/esm/utils/mergeRefs.js +3 -3
- package/dist/esm/utils/mergeRefs.js.map +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/taco.cjs.development.js +350 -281
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/mergeRefs.d.ts +1 -1
- package/dist/utils/tailwind.d.ts +1 -1
- package/package.json +3 -4
- package/tailwind.config.js +9 -0
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\r\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\r\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\r\n return <span {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\nHanger.Title = Title;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Title","DialogTitle","className","cn","Content","HangerContent","
|
1
|
+
{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport { mergeRefs } from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n props: any;\r\n ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n /** Aria-label for the close icon button of hanger */\r\n close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\r\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\r\n const className = cn('mb-1 text-base font-bold flex w-full', props.className);\r\n return <span {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const context = React.useContext(HangerContext);\r\n const { texts } = useLocalization();\r\n const className = cn(\r\n 'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent max-w-sm',\r\n props.className\r\n );\r\n const handleInteractOutside = (event: CustomEvent): void => {\r\n event.preventDefault();\r\n };\r\n\r\n return (\r\n <UnstyledContent\r\n className={className}\r\n data-taco=\"hanger\"\r\n onInteractOutside={handleInteractOutside}\r\n placement={props.placement}\r\n ref={ref}\r\n >\r\n {props.children}\r\n <UnstyledArrow className=\"text-blue\" />\r\n <PopoverPrimitive.Close asChild>\r\n <IconButton\r\n appearance=\"primary\"\r\n aria-label={texts.hanger.close}\r\n className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n icon=\"close\"\r\n onClick={context.props.onClose}\r\n />\r\n </PopoverPrimitive.Close>\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n anchor?: JSX.Element;\r\n /**\r\n * Shows or hides hanger depending on the value\r\n * @defaultValue true\r\n */\r\n defaultOpen?: boolean;\r\n /** Handler called when user closes the hanger */\r\n onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n Title: React.ForwardRefExoticComponent<HangerTitleProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n const [open, setOpen] = React.useState(false);\r\n React.useEffect(() => {\r\n if (defaultOpen) {\r\n setOpen(defaultOpen);\r\n }\r\n }, []);\r\n\r\n return (\r\n <HangerContext.Provider value={context}>\r\n <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n {anchor && <Anchor>{anchor}</Anchor>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </HangerContext.Provider>\r\n );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\nHanger.Title = Title;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Title","DialogTitle","className","cn","Content","HangerContent","useLocalization","texts","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
|
@@ -2,7 +2,7 @@ import { forwardRef, useMemo, createElement, createContext, useContext, isValidE
|
|
2
2
|
import cn from 'classnames';
|
3
3
|
import { Root, Trigger as Trigger$1, Close as Close$1 } from '@radix-ui/react-popover';
|
4
4
|
import { UnstyledContent, UnstyledArrow } from './Primitives.js';
|
5
|
-
import mergeRefs from '../../utils/mergeRefs.js';
|
5
|
+
import { mergeRefs } from '../../utils/mergeRefs.js';
|
6
6
|
|
7
7
|
const PopoverContext = /*#__PURE__*/createContext({
|
8
8
|
props: {},
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\r\n\r\nconst PopoverContext = React.createContext<PopoverContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(PopoverContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\r\n const close = () => {\r\n onClick(new CustomEvent('hide'));\r\n };\r\n\r\n return children({ close, ref });\r\n});\r\n\r\nexport type PopoverContentRenderProps = { close: () => void };\r\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\r\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\r\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('bg-white focus:border-blue-light', props.className);\r\n\r\n let output;\r\n\r\n if (typeof props.children === 'function') {\r\n output = (\r\n <PopoverPrimitive.Close asChild>\r\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\r\n </PopoverPrimitive.Close>\r\n );\r\n } else {\r\n output = props.children;\r\n }\r\n\r\n return (\r\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\r\n {output}\r\n <UnstyledArrow className=\"text-white\" />\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Close = React.forwardRef(\r\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\r\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\r\n )\r\n);\r\n\r\nexport type PopoverProps = React.PropsWithChildren<{\r\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n}>;\r\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\r\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\r\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\r\n};\r\n\r\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\r\n const { children, trigger, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n return (\r\n <PopoverContext.Provider value={context}>\r\n <PopoverPrimitive.Root>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </PopoverContext.Provider>\r\n );\r\n}) as ForwardedPopoverWithStatics;\r\nPopover.Trigger = Trigger;\r\nPopover.Content = Content;\r\nPopover.Close = Close;\r\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverTrigger","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","Provider","value"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from './Primitives';\r\nimport { mergeRefs } from '../../utils/mergeRefs';\r\n\r\ntype PopoverContextValue = { props: any; ref: React.Ref<HTMLElement> };\r\n\r\nconst PopoverContext = React.createContext<PopoverContextValue>({\r\n props: {},\r\n ref: null,\r\n});\r\n\r\nexport type PopoverTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Trigger = React.forwardRef(function PopoverTrigger(props: PopoverTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n const context = React.useContext(PopoverContext);\r\n let children = props.children;\r\n\r\n if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n console.warn(\r\n `Popover.Trigger requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n );\r\n children = <span>{props.children}</span>;\r\n }\r\n\r\n return (\r\n <PopoverPrimitive.Trigger {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n );\r\n});\r\n\r\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick }: any, ref) {\r\n const close = () => {\r\n onClick(new CustomEvent('hide'));\r\n };\r\n\r\n return children({ close, ref });\r\n});\r\n\r\nexport type PopoverContentRenderProps = { close: () => void };\r\nexport type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\r\n children: React.ReactNode | ((props: PopoverContentRenderProps) => React.ReactNode);\r\n /** Set the position of the Popover relative to its trigger. Default value is `bottom` */\r\n placement?: Placement;\r\n};\r\nconst Content = React.forwardRef(function PopoverContent(props: PopoverContentProps, ref: React.Ref<HTMLDivElement>) {\r\n const className = cn('bg-white focus:border-blue-light', props.className);\r\n\r\n let output;\r\n\r\n if (typeof props.children === 'function') {\r\n output = (\r\n <PopoverPrimitive.Close asChild>\r\n <RenderPropWrapper>{props.children}</RenderPropWrapper>\r\n </PopoverPrimitive.Close>\r\n );\r\n } else {\r\n output = props.children;\r\n }\r\n\r\n return (\r\n <UnstyledContent className={className} placement={props.placement} ref={ref}>\r\n {output}\r\n <UnstyledArrow className=\"text-white\" />\r\n </UnstyledContent>\r\n );\r\n});\r\n\r\nexport type PopoverCloseProps = React.HTMLAttributes<HTMLButtonElement>;\r\nconst Close = React.forwardRef(\r\n (props: PopoverCloseProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => (\r\n <PopoverPrimitive.Close {...props} ref={ref} asChild />\r\n )\r\n);\r\n\r\nexport type PopoverProps = React.PropsWithChildren<{\r\n /** A trigger to be used for the popover, should not be set if `children` already contains a trigger */\r\n trigger?: JSX.Element;\r\n}>;\r\nexport type ForwardedPopoverWithStatics = React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLElement>> & {\r\n Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps>;\r\n Content: React.ForwardRefExoticComponent<PopoverContentProps>;\r\n Close: React.ForwardRefExoticComponent<PopoverCloseProps>;\r\n};\r\n\r\nexport const Popover = React.forwardRef(function Popover(props: PopoverProps, ref: React.Ref<HTMLElement>) {\r\n const { children, trigger, ...otherProps } = props;\r\n const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n return (\r\n <PopoverContext.Provider value={context}>\r\n <PopoverPrimitive.Root>\r\n {trigger && <Trigger>{trigger}</Trigger>}\r\n {children}\r\n </PopoverPrimitive.Root>\r\n </PopoverContext.Provider>\r\n );\r\n}) as ForwardedPopoverWithStatics;\r\nPopover.Trigger = Trigger;\r\nPopover.Content = Content;\r\nPopover.Close = Close;\r\n"],"names":["PopoverContext","React","props","ref","Trigger","PopoverTrigger","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","RenderPropWrapper","onClick","close","CustomEvent","Content","PopoverContent","className","cn","output","UnstyledContent","placement","UnstyledArrow","Close","Popover","trigger","otherProps","Provider","value"],"mappings":";;;;;;AASA,MAAMA,cAAc,gBAAGC,aAAA,CAAyC;EAC5DC,KAAK,EAAE,EADqD;EAE5DC,GAAG,EAAE;AAFuD,CAAzC,CAAvB;AAMA,MAAMC,OAAO,gBAAGH,UAAA,CAAiB,SAASI,cAAT,CAAwBH,KAAxB,EAAoDC,GAApD;;;EAC7B,MAAMG,OAAO,GAAGL,UAAA,CAAiBD,cAAjB,CAAhB;EACA,IAAIO,QAAQ,GAAGL,KAAK,CAACK,QAArB;;EAEA,IAAIN,cAAA,CAAqBC,KAAK,CAACK,QAA3B,KAAwC,2BAAOL,KAAK,CAACK,QAAb,oDAAO,gBAAgBC,IAAvB,MAAgC,UAA5E,EAAwF;IACpFC,OAAO,CAACC,IAAR,qHACwHR,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,kDAAkDT,KAAK,CAACK,QAAN,CAAeC,IAAf,CAAoBG,sFADlN;IAGAJ,QAAQ,GAAGN,aAAA,OAAA,MAAA,EAAOC,KAAK,CAACK,QAAb,CAAX;;;EAGJ,OACIN,aAAA,CAACW,SAAD,oBAA8BN,OAAO,CAACJ,OAAWA;IAAOK,QAAQ,EAAEA;IAAUJ,GAAG,EAAEU,SAAS,CAAC,CAACP,OAAO,CAACH,GAAT,EAAcA,GAAd,CAAD;IAAsBW,OAAO;IAAvH,CADJ;AAGH,CAde,CAAhB;AAgBA,MAAMC,iBAAiB,gBAAGd,UAAA,CAAiB,SAASc,iBAAT,CAA2B;EAAER,QAAF;EAAYS;AAAZ,CAA3B,EAAuDb,GAAvD;EACvC,MAAMc,KAAK,GAAG;IACVD,OAAO,CAAC,IAAIE,WAAJ,CAAgB,MAAhB,CAAD,CAAP;GADJ;;EAIA,OAAOX,QAAQ,CAAC;IAAEU,KAAF;IAASd;GAAV,CAAf;AACH,CANyB,CAA1B;AAcA,MAAMgB,OAAO,gBAAGlB,UAAA,CAAiB,SAASmB,cAAT,CAAwBlB,KAAxB,EAAoDC,GAApD;EAC7B,MAAMkB,SAAS,GAAGC,EAAE,CAAC,kCAAD,EAAqCpB,KAAK,CAACmB,SAA3C,CAApB;EAEA,IAAIE,MAAJ;;EAEA,IAAI,OAAOrB,KAAK,CAACK,QAAb,KAA0B,UAA9B,EAA0C;IACtCgB,MAAM,GACFtB,aAAA,CAACW,OAAD;MAAwBE,OAAO;KAA/B,EACIb,aAAA,CAACc,iBAAD,MAAA,EAAoBb,KAAK,CAACK,QAA1B,CADJ,CADJ;GADJ,MAMO;IACHgB,MAAM,GAAGrB,KAAK,CAACK,QAAf;;;EAGJ,OACIN,aAAA,CAACuB,eAAD;IAAiBH,SAAS,EAAEA;IAAWI,SAAS,EAAEvB,KAAK,CAACuB;IAAWtB,GAAG,EAAEA;GAAxE,EACKoB,MADL,EAEItB,aAAA,CAACyB,aAAD;IAAeL,SAAS,EAAC;GAAzB,CAFJ,CADJ;AAMH,CArBe,CAAhB;AAwBA,MAAMM,KAAK,gBAAG1B,UAAA,CACV,CAACC,KAAD,EAA2BC,GAA3B,KACIF,aAAA,CAACW,OAAD,oBAA4BV;EAAOC,GAAG,EAAEA;EAAKW,OAAO;EAApD,CAFM,CAAd;MAgBac,OAAO,gBAAG3B,UAAA,CAAiB,SAAS2B,OAAT,CAAiB1B,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEI,QAAF;IAAYsB,OAAZ;IAAqB,GAAGC;MAAe5B,KAA7C;EACA,MAAMI,OAAO,GAAGL,OAAA,CAAc,OAAO;IAAEC,KAAK,EAAE4B,UAAT;IAAqB3B;GAA5B,CAAd,EAAkD,CAAC2B,UAAD,CAAlD,CAAhB;EAEA,OACI7B,aAAA,CAACD,cAAc,CAAC+B,QAAhB;IAAyBC,KAAK,EAAE1B;GAAhC,EACIL,aAAA,CAACW,IAAD,MAAA,EACKiB,OAAO,IAAI5B,aAAA,CAACG,OAAD,MAAA,EAAUyB,OAAV,CADhB,EAEKtB,QAFL,CADJ,CADJ;AAQH,CAZsB;AAavBqB,OAAO,CAACxB,OAAR,GAAkBA,OAAlB;AACAwB,OAAO,CAACT,OAAR,GAAkBA,OAAlB;AACAS,OAAO,CAACD,KAAR,GAAgBA,KAAhB;;;;"}
|
@@ -14,6 +14,7 @@ import '../Toast/Toaster.js';
|
|
14
14
|
import { useLocalization } from '../Provider/Provider.js';
|
15
15
|
import '../Calendar/Calendar.js';
|
16
16
|
import '../Checkbox/Checkbox.js';
|
17
|
+
import '../../utils/hooks/useProxiedRef.js';
|
17
18
|
import { Input } from '../Input/Input.js';
|
18
19
|
import keycode from 'keycode';
|
19
20
|
import '../../utils/hooks/useListKeyboardNavigation.js';
|
@@ -21,6 +22,7 @@ import '../../utils/hooks/useListScrollTo.js';
|
|
21
22
|
import '../../utils/hooks/useBoundingClientRectListener.js';
|
22
23
|
import '../Combobox/Combobox.js';
|
23
24
|
import '../../utils/date.js';
|
25
|
+
import '../../utils/mergeRefs.js';
|
24
26
|
import '../Popover/Popover.js';
|
25
27
|
import '../Datepicker/Datepicker.js';
|
26
28
|
import '../Dialog/Dialog.js';
|
@@ -33,6 +35,7 @@ import '../Listbox/Listbox.js';
|
|
33
35
|
import '../RadioGroup/RadioGroup.js';
|
34
36
|
import '../Menu/Menu.js';
|
35
37
|
import '../Treeview/Treeview.js';
|
38
|
+
import '../../utils/hooks/useDropTarget.js';
|
36
39
|
import '../Navigation/Navigation.js';
|
37
40
|
import '../Select/Select.js';
|
38
41
|
import '../Pagination/usePagination.js';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n\r\n props.onKeyDown?.(event);\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":"
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n /**\r\n * aria-label text for input\r\n */\r\n inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n { onSearch, ...props }: SearchInputProps,\r\n ref: React.Ref<HTMLInputElement>\r\n) {\r\n const { texts } = useLocalization();\r\n\r\n const handleClick = (): void => {\r\n if (!props.disabled) {\r\n onSearch?.(props.value);\r\n }\r\n };\r\n\r\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n if (isEnterKeyPressed) {\r\n handleClick();\r\n }\r\n\r\n props.onKeyDown?.(event);\r\n };\r\n\r\n return (\r\n <Input\r\n aria-label={texts.searchInput.inputLabel}\r\n {...props}\r\n button={\r\n <IconButton\r\n icon=\"search\"\r\n className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n disabled={props.disabled}\r\n onClick={handleClick}\r\n />\r\n }\r\n onKeyDown={handleKeyDown}\r\n ref={ref}\r\n type=\"search\"\r\n />\r\n );\r\n});\r\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;IAEA,IAAIF,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACY,SAAN,2EAAAZ,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACe,KAAD;kBACgBX,KAAK,CAACY,WAAN,CAAkBC;KAC1Bf;IACJgB,MAAM,EACFlB,aAAA,CAACmB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVd,QAAQ,EAAEL,KAAK,CAACK;MAChBe,OAAO,EAAEhB;KAJb;IAOJQ,SAAS,EAAEL;IACXN,GAAG,EAAEA;IACLoB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}
|
package/dist/esm/index.js
CHANGED
@@ -13,12 +13,14 @@ export { ToastProvider, useToast } from './components/Toast/Toaster.js';
|
|
13
13
|
export { Provider, defaultLocalisationTexts, useLocalization, useTaco } from './components/Provider/Provider.js';
|
14
14
|
export { Calendar } from './components/Calendar/Calendar.js';
|
15
15
|
export { Checkbox } from './components/Checkbox/Checkbox.js';
|
16
|
+
export { useProxiedRef } from './utils/hooks/useProxiedRef.js';
|
16
17
|
export { Input } from './components/Input/Input.js';
|
17
18
|
export { getNextIndexFromKeycode, useListKeyboardNavigation } from './utils/hooks/useListKeyboardNavigation.js';
|
18
19
|
export { useListScrollTo } from './utils/hooks/useListScrollTo.js';
|
19
20
|
export { useBoundingClientRectListener } from './utils/hooks/useBoundingClientRectListener.js';
|
20
21
|
export { Combobox } from './components/Combobox/Combobox.js';
|
21
22
|
export { format, parseFromCustomString, parseFromISOString } from './utils/date.js';
|
23
|
+
export { mergeRefs } from './utils/mergeRefs.js';
|
22
24
|
export { Popover } from './components/Popover/Popover.js';
|
23
25
|
export { Datepicker } from './components/Datepicker/Datepicker.js';
|
24
26
|
export { Dialog } from './components/Dialog/Dialog.js';
|
@@ -32,6 +34,7 @@ export { Listbox, MultiListbox } from './components/Listbox/Listbox.js';
|
|
32
34
|
export { RadioGroup, findByValue, getRadioGroupItemValueAsString, useRadioGroup } from './components/RadioGroup/RadioGroup.js';
|
33
35
|
export { Menu } from './components/Menu/Menu.js';
|
34
36
|
export { Treeview } from './components/Treeview/Treeview.js';
|
37
|
+
export { useDropTarget } from './utils/hooks/useDropTarget.js';
|
35
38
|
export { Navigation } from './components/Navigation/Navigation.js';
|
36
39
|
export { Select } from './components/Select/Select.js';
|
37
40
|
export { usePagination } from './components/Pagination/usePagination.js';
|
package/dist/esm/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -1,22 +1,25 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
var useDropTarget = function useDropTarget(onDrop) {
|
4
|
+
var _React$useState = React__default.useState(false),
|
5
|
+
isDraggedOver = _React$useState[0],
|
6
|
+
setDraggedOver = _React$useState[1];
|
7
|
+
|
8
|
+
var handleDragEnter = React__default.useCallback(function (event) {
|
6
9
|
event.preventDefault();
|
7
10
|
setDraggedOver(true);
|
8
11
|
}, []);
|
9
|
-
|
12
|
+
var handleDragLeave = React__default.useCallback(function (event) {
|
10
13
|
event.preventDefault();
|
11
14
|
|
12
15
|
if (event.target === event.currentTarget) {
|
13
16
|
setDraggedOver(false);
|
14
17
|
}
|
15
18
|
}, []);
|
16
|
-
|
19
|
+
var handleDragOver = React__default.useCallback(function (event) {
|
17
20
|
event.preventDefault();
|
18
21
|
}, []);
|
19
|
-
|
22
|
+
var handleDrop = React__default.useCallback(function (event) {
|
20
23
|
event.preventDefault();
|
21
24
|
event.persist();
|
22
25
|
setDraggedOver(false);
|
@@ -25,7 +28,7 @@ const useDropTarget = onDrop => {
|
|
25
28
|
onDrop(event);
|
26
29
|
}
|
27
30
|
}, [onDrop]);
|
28
|
-
|
31
|
+
var props = onDrop ? {
|
29
32
|
onDragEnter: handleDragEnter,
|
30
33
|
onDragLeave: handleDragLeave,
|
31
34
|
onDragOver: handleDragOver,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDropTarget.js","sources":["../../../../src/utils/hooks/useDropTarget.ts"],"sourcesContent":["import React from 'react';\r\n\r\nexport type useDropTarget = [\r\n boolean,\r\n (\r\n | undefined\r\n | {\r\n onDragEnter: React.DragEventHandler;\r\n onDragLeave: React.DragEventHandler;\r\n onDragOver: React.DragEventHandler;\r\n onDrop: React.DragEventHandler;\r\n }\r\n )\r\n];\r\n\r\nexport const useDropTarget = (onDrop: React.DragEventHandler | undefined): useDropTarget => {\r\n const [isDraggedOver, setDraggedOver] = React.useState(false);\r\n\r\n const handleDragEnter = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n setDraggedOver(true);\r\n }, []);\r\n\r\n const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n\r\n if (event.target === event.currentTarget) {\r\n setDraggedOver(false);\r\n }\r\n }, []);\r\n\r\n const handleDragOver = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n }, []);\r\n\r\n const handleDrop = React.useCallback(\r\n (event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n event.persist();\r\n\r\n setDraggedOver(false);\r\n\r\n if (onDrop) {\r\n onDrop(event);\r\n }\r\n },\r\n [onDrop]\r\n );\r\n\r\n const props = onDrop\r\n ? {\r\n onDragEnter: handleDragEnter,\r\n onDragLeave: handleDragLeave,\r\n onDragOver: handleDragOver,\r\n onDrop: handleDrop,\r\n }\r\n : undefined;\r\n\r\n return [isDraggedOver, props];\r\n};\r\n"],"names":["useDropTarget","onDrop","
|
1
|
+
{"version":3,"file":"useDropTarget.js","sources":["../../../../src/utils/hooks/useDropTarget.ts"],"sourcesContent":["import React from 'react';\r\n\r\nexport type useDropTarget = [\r\n boolean,\r\n (\r\n | undefined\r\n | {\r\n onDragEnter: React.DragEventHandler;\r\n onDragLeave: React.DragEventHandler;\r\n onDragOver: React.DragEventHandler;\r\n onDrop: React.DragEventHandler;\r\n }\r\n )\r\n];\r\n\r\nexport const useDropTarget = (onDrop: React.DragEventHandler | undefined): useDropTarget => {\r\n const [isDraggedOver, setDraggedOver] = React.useState(false);\r\n\r\n const handleDragEnter = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n setDraggedOver(true);\r\n }, []);\r\n\r\n const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n\r\n if (event.target === event.currentTarget) {\r\n setDraggedOver(false);\r\n }\r\n }, []);\r\n\r\n const handleDragOver = React.useCallback((event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n }, []);\r\n\r\n const handleDrop = React.useCallback(\r\n (event: React.DragEvent<HTMLElement>) => {\r\n event.preventDefault();\r\n event.persist();\r\n\r\n setDraggedOver(false);\r\n\r\n if (onDrop) {\r\n onDrop(event);\r\n }\r\n },\r\n [onDrop]\r\n );\r\n\r\n const props = onDrop\r\n ? {\r\n onDragEnter: handleDragEnter,\r\n onDragLeave: handleDragLeave,\r\n onDragOver: handleDragOver,\r\n onDrop: handleDrop,\r\n }\r\n : undefined;\r\n\r\n return [isDraggedOver, props];\r\n};\r\n"],"names":["useDropTarget","onDrop","React","useState","isDraggedOver","setDraggedOver","handleDragEnter","useCallback","event","preventDefault","handleDragLeave","target","currentTarget","handleDragOver","handleDrop","persist","props","onDragEnter","onDragLeave","onDragOver","undefined"],"mappings":";;IAeaA,aAAa,GAAG,SAAhBA,aAAgB,CAACC,MAAD;EACzB,sBAAwCC,cAAK,CAACC,QAAN,CAAe,KAAf,CAAxC;MAAOC,aAAP;MAAsBC,cAAtB;;EAEA,IAAMC,eAAe,GAAGJ,cAAK,CAACK,WAAN,CAAkB,UAACC,KAAD;IACtCA,KAAK,CAACC,cAAN;IACAJ,cAAc,CAAC,IAAD,CAAd;GAFoB,EAGrB,EAHqB,CAAxB;EAKA,IAAMK,eAAe,GAAGR,cAAK,CAACK,WAAN,CAAkB,UAACC,KAAD;IACtCA,KAAK,CAACC,cAAN;;IAEA,IAAID,KAAK,CAACG,MAAN,KAAiBH,KAAK,CAACI,aAA3B,EAA0C;MACtCP,cAAc,CAAC,KAAD,CAAd;;GAJgB,EAMrB,EANqB,CAAxB;EAQA,IAAMQ,cAAc,GAAGX,cAAK,CAACK,WAAN,CAAkB,UAACC,KAAD;IACrCA,KAAK,CAACC,cAAN;GADmB,EAEpB,EAFoB,CAAvB;EAIA,IAAMK,UAAU,GAAGZ,cAAK,CAACK,WAAN,CACf,UAACC,KAAD;IACIA,KAAK,CAACC,cAAN;IACAD,KAAK,CAACO,OAAN;IAEAV,cAAc,CAAC,KAAD,CAAd;;IAEA,IAAIJ,MAAJ,EAAY;MACRA,MAAM,CAACO,KAAD,CAAN;;GARO,EAWf,CAACP,MAAD,CAXe,CAAnB;EAcA,IAAMe,KAAK,GAAGf,MAAM,GACd;IACIgB,WAAW,EAAEX,eADjB;IAEIY,WAAW,EAAER,eAFjB;IAGIS,UAAU,EAAEN,cAHhB;IAIIZ,MAAM,EAAEa;GALE,GAOdM,SAPN;EASA,OAAO,CAAChB,aAAD,EAAgBY,KAAhB,CAAP;AACH;;;;"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { useRef, useEffect } from 'react';
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
useEffect(()
|
3
|
+
var useProxiedRef = function useProxiedRef(ref) {
|
4
|
+
var internalRef = useRef(null);
|
5
|
+
useEffect(function () {
|
6
6
|
if (ref) {
|
7
7
|
if (typeof ref === 'function') {
|
8
8
|
ref(internalRef.current);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useProxiedRef.js","sources":["../../../../src/utils/hooks/useProxiedRef.ts"],"sourcesContent":["import * as React from 'react';\r\n\r\nexport const useProxiedRef = <T extends HTMLElement>(ref: React.Ref<HTMLElement>): React.RefObject<T> => {\r\n const internalRef = React.useRef<T>(null);\r\n\r\n React.useEffect(() => {\r\n if (ref) {\r\n if (typeof ref === 'function') {\r\n ref(internalRef.current);\r\n } else {\r\n (ref as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;\r\n }\r\n }\r\n }, [ref]);\r\n\r\n return internalRef;\r\n};\r\n"],"names":["useProxiedRef","ref","internalRef","React","current"],"mappings":";;
|
1
|
+
{"version":3,"file":"useProxiedRef.js","sources":["../../../../src/utils/hooks/useProxiedRef.ts"],"sourcesContent":["import * as React from 'react';\r\n\r\nexport const useProxiedRef = <T extends HTMLElement>(ref: React.Ref<HTMLElement>): React.RefObject<T> => {\r\n const internalRef = React.useRef<T>(null);\r\n\r\n React.useEffect(() => {\r\n if (ref) {\r\n if (typeof ref === 'function') {\r\n ref(internalRef.current);\r\n } else {\r\n (ref as React.MutableRefObject<HTMLElement | null>).current = internalRef.current;\r\n }\r\n }\r\n }, [ref]);\r\n\r\n return internalRef;\r\n};\r\n"],"names":["useProxiedRef","ref","internalRef","React","current"],"mappings":";;IAEaA,aAAa,GAAG,SAAhBA,aAAgB,CAAwBC,GAAxB;EACzB,IAAMC,WAAW,GAAGC,MAAA,CAAgB,IAAhB,CAApB;EAEAA,SAAA,CAAgB;IACZ,IAAIF,GAAJ,EAAS;MACL,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;QAC3BA,GAAG,CAACC,WAAW,CAACE,OAAb,CAAH;OADJ,MAEO;QACFH,GAAkD,CAACG,OAAnD,GAA6DF,WAAW,CAACE,OAAzE;;;GALb,EAQG,CAACH,GAAD,CARH;EAUA,OAAOC,WAAP;AACH;;;;"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
function mergeRefs(refs) {
|
2
|
-
return value
|
3
|
-
refs.forEach(ref
|
2
|
+
return function (value) {
|
3
|
+
refs.forEach(function (ref) {
|
4
4
|
if (typeof ref === 'function') {
|
5
5
|
ref(value);
|
6
6
|
} else if (ref != null) {
|
@@ -10,5 +10,5 @@ function mergeRefs(refs) {
|
|
10
10
|
};
|
11
11
|
}
|
12
12
|
|
13
|
-
export
|
13
|
+
export { mergeRefs };
|
14
14
|
//# sourceMappingURL=mergeRefs.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utils/mergeRefs.ts"],"sourcesContent":["import React from 'react';\r\n\r\nexport
|
1
|
+
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utils/mergeRefs.ts"],"sourcesContent":["import React from 'react';\r\n\r\nexport function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T> {\r\n return value => {\r\n refs.forEach(ref => {\r\n if (typeof ref === 'function') {\r\n ref(value);\r\n } else if (ref != null) {\r\n (ref as React.MutableRefObject<T | null>).current = value;\r\n }\r\n });\r\n };\r\n}\r\n"],"names":["mergeRefs","refs","value","forEach","ref","current"],"mappings":"SAEgBA,UAAmBC;EAC/B,OAAO,UAAAC,KAAK;IACRD,IAAI,CAACE,OAAL,CAAa,UAAAC,GAAG;MACZ,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;QAC3BA,GAAG,CAACF,KAAD,CAAH;OADJ,MAEO,IAAIE,GAAG,IAAI,IAAX,EAAiB;QACnBA,GAAwC,CAACC,OAAzC,GAAmDH,KAAnD;;KAJT;GADJ;AASH;;;;"}
|
package/dist/index.d.ts
CHANGED
@@ -39,8 +39,11 @@ export * from './components/Tour/Tour';
|
|
39
39
|
export * from './components/Treeview/Treeview';
|
40
40
|
export * from './components/VisuallyHidden/VisuallyHidden';
|
41
41
|
export * from './utils/date';
|
42
|
+
export * from './utils/mergeRefs';
|
42
43
|
export * from './utils/hooks/useBoundingClientRectListener';
|
44
|
+
export * from './utils/hooks/useDropTarget';
|
43
45
|
export * from './utils/hooks/useListKeyboardNavigation';
|
44
|
-
export * from './utils/hooks/useOnClickOutside';
|
45
46
|
export * from './utils/hooks/useListScrollTo';
|
47
|
+
export * from './utils/hooks/useOnClickOutside';
|
48
|
+
export * from './utils/hooks/useProxiedRef';
|
46
49
|
export * from './types';
|