@doist/reactist 33.1.0 → 33.2.0

package/lib/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n    useTooltipStore,\n} from '@ariakit/react'\n\nimport { Box } from '../box'\n\nimport styles from './tooltip.module.css'\n\nimport type { TooltipStore, TooltipStoreState } from '@ariakit/react'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } =\n            React.useContext(TooltipContext)\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        /* eslint-disable react-hooks/refs */\n        if (typeof child.ref === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={child.ref} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n        /* eslint-enable react-hooks/refs */\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","t0","$","_c","t1","t2","children","undefined","t3","value","t4","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","Error","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n    Tooltip as AriakitTooltip,\n    TooltipAnchor,\n    TooltipArrow,\n    useTooltipStore,\n} from '@ariakit/react'\n\nimport { Box } from '../box'\n\nimport styles from './tooltip.module.css'\n\nimport type { TooltipStore, TooltipStoreState } from '@ariakit/react'\nimport type { JSX } from 'react'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\nconst defaultShowTimeout = 500\nconst defaultHideTimeout = 100\n\ntype TooltipContextState = {\n    showTimeout: number\n    hideTimeout: number\n}\n\nconst TooltipContext = React.createContext<TooltipContextState>({\n    showTimeout: defaultShowTimeout,\n    hideTimeout: defaultHideTimeout,\n})\n\nfunction TooltipProvider({\n    showTimeout = defaultShowTimeout,\n    hideTimeout = defaultHideTimeout,\n    children,\n}: React.PropsWithChildren<{\n    showTimeout?: number\n    hideTimeout?: number\n}>) {\n    const value = React.useMemo(() => ({ showTimeout, hideTimeout }), [showTimeout, hideTimeout])\n    return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>\n}\n\ninterface TooltipProps extends ObfuscatedClassName {\n    /**\n     * The element that triggers the tooltip. Generally a button or link.\n     *\n     * It should be an interactive element accessible both via mouse and keyboard interactions.\n     */\n    children: React.ReactNode\n\n    /**\n     * The content to show in the tooltip.\n     *\n     * It can be rich content provided via React elements, or string content. It should not include\n     * interactive elements inside it. This includes links or buttons.\n     *\n     * You can provide a function instead of the content itself. In this case, the function should\n     * return the desired content. This is useful if the content is expensive to generate. It can\n     * also be useful if the content dynamically changes often, so every time you trigger the\n     * tooltip the content may have changed (e.g. if you show a ticking time clock in the tooltip).\n     *\n     * The trigger element will be associated to this content via `aria-describedby`. This means\n     * that the tooltip content will be read by assistive technologies such as screen readers. It\n     * will likely read this content right after reading the trigger element label.\n     */\n    content: React.ReactNode | (() => React.ReactNode)\n\n    /**\n     * How to place the tooltip relative to its trigger element.\n     *\n     * The possible values are \"top\", \"bottom\", \"left\", \"right\". Additionally, any of these values\n     * can be combined with `-start` or `-end` for even more control. For instance `top-start` will\n     * place the tooltip at the top, but with the start (e.g. left) side of the toolip and the\n     * trigger aligned. If neither `-start` or `-end` are provided, the tooltip is centered along\n     * the vertical or horizontal axis with the trigger.\n     *\n     * The position is enforced whenever possible, but tooltips can appear in different positions\n     * if the specified one would make the tooltip intersect with the viewport edges.\n     *\n     * @default 'top'\n     */\n    position?: TooltipStoreState['placement']\n\n    /**\n     * The separation (in pixels) between the trigger element and the tooltip.\n     * @default 3\n     */\n    gapSize?: number\n\n    /**\n     * Whether to show an arrow-like element attached to the tooltip, and pointing towards the\n     * trigger element.\n     * @default false\n     */\n    withArrow?: boolean\n\n    /**\n     * The amount of time in milliseconds to wait before showing the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 500\n     */\n    showTimeout?: number\n\n    /**\n     * The amount of time in milliseconds to wait before hiding the tooltip\n     * Use `<TooltipContext.Provider>` to set a global value for all tooltips\n     * @default 100\n     */\n    hideTimeout?: number\n}\n\nconst Tooltip = React.forwardRef<TooltipStore, TooltipProps>(\n    (\n        {\n            children,\n            content,\n            position = 'top',\n            gapSize = 3,\n            withArrow = false,\n            showTimeout,\n            hideTimeout,\n            exceptionallySetClassName,\n        },\n        ref,\n    ) => {\n        const { showTimeout: globalShowTimeout, hideTimeout: globalHideTimeout } =\n            React.useContext(TooltipContext)\n\n        const tooltip = useTooltipStore({\n            placement: position,\n            showTimeout: showTimeout ?? globalShowTimeout,\n            hideTimeout: hideTimeout ?? globalHideTimeout,\n        })\n\n        React.useImperativeHandle(ref, () => tooltip, [tooltip])\n\n        const isOpen = tooltip.useState('open')\n\n        const child = React.Children.only(\n            children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n        )\n\n        if (!child) {\n            return child\n        }\n\n        /* eslint-disable react-hooks/refs */\n        const rawRef =\n            'ref' in child.props\n                ? child.props.ref\n                : // child.ref access kept for React 18 compatibility\n                  (child as { ref?: unknown }).ref\n\n        if (typeof rawRef === 'string') {\n            throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n        }\n\n        const childRef = rawRef as React.Ref<HTMLDivElement>\n\n        return (\n            <>\n                <TooltipAnchor render={child} store={tooltip} ref={childRef} />\n                {isOpen && content ? (\n                    <AriakitTooltip\n                        store={tooltip}\n                        gutter={gapSize}\n                        render={\n                            <Box\n                                className={[styles.tooltip, exceptionallySetClassName]}\n                                background=\"toast\"\n                                borderRadius=\"standard\"\n                                paddingX=\"small\"\n                                paddingY=\"xsmall\"\n                                maxWidth=\"medium\"\n                                width=\"fitContent\"\n                                overflow=\"hidden\"\n                                textAlign=\"center\"\n                            />\n                        }\n                    >\n                        {withArrow ? <TooltipArrow /> : null}\n                        {typeof content === 'function' ? content() : content}\n                    </AriakitTooltip>\n                ) : null}\n            </>\n        )\n        /* eslint-enable react-hooks/refs */\n    },\n)\n\nTooltip.displayName = 'Tooltip'\n\nexport type { TooltipProps }\nexport { Tooltip, TooltipProvider }\n"],"names":["defaultShowTimeout","defaultHideTimeout","TooltipContext","React","createContext","showTimeout","hideTimeout","TooltipProvider","t0","$","_c","t1","t2","children","undefined","t3","value","t4","createElement","Provider","Tooltip","forwardRef","content","position","gapSize","withArrow","exceptionallySetClassName","ref","globalShowTimeout","globalHideTimeout","useContext","tooltip","useTooltipStore","placement","useImperativeHandle","isOpen","useState","child","Children","only","rawRef","props","Error","childRef","Fragment","TooltipAnchor","render","store","AriakitTooltip","gutter","Box","className","styles","background","borderRadius","paddingX","paddingY","maxWidth","width","overflow","textAlign","TooltipArrow","displayName"],"mappings":"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"}

package/lib/utils/polymorphism.d.ts

@@ -66,7 +66,7 @@ type ElementByTagOrAny<ComponentType extends React.ElementType> = ComponentType
  * @see WithObfuscatedClassName
  */
 interface ForwardRefFunction<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> {
-    (props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>, ref: ((instance: ElementByTagOrAny<ComponentType> | null) => void) | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null> | null): React.ReactElement | null;
+    (props: React.PropsWithoutRef<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>, ref: React.ForwardedRef<ElementByTagOrAny<ComponentType>>): React.ReactElement | null;
     displayName?: string;
 }
 /**
@@ -120,7 +120,6 @@ interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps
     <TT extends React.ElementType = ComponentType>(props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>): React.ReactElement | null;
     readonly $$typeof: symbol;
     defaultProps?: Partial<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
-    propTypes?: React.WeakValidationMap<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
     displayName?: string;
 }
 /**

package/lib/utils/polymorphism.js.map

@@ -1 +1 @@
-{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n          ? Omit<Props, 'className'>\n          : ShouldObfuscateClassName extends 'keepClassName'\n            ? Props\n            : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<ComponentType extends React.ElementType> =\n    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, PolymorphicComponentProps }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAI3BC,MAA6E,EAAE;AAC7E,EAAA,oBAAOC,gBAAK,CAACC,UAAU,CAACF,MAAM,CAAC,CAAA;AAKnC;;;;"}
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react'\n\nimport type { ObfuscatedClassName } from './common-types'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n          ? Omit<Props, 'className'>\n          : ShouldObfuscateClassName extends 'keepClassName'\n            ? Props\n            : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<ComponentType extends React.ElementType> =\n    ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode,\n> {\n    (\n        props: React.PropsWithoutRef<\n            PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n        >,\n        ref: React.ForwardedRef<ElementByTagOrAny<ComponentType>>,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @deprecated Use Ariakit's composition instead (https://ariakit.org/guide/composition)\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName',\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, PolymorphicComponentProps }\nexport { polymorphicComponent }\n"],"names":["polymorphicComponent","render","React","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,oBAAoBA,CAI3BC,MAA6E,EAAE;AAC7E,EAAA,oBAAOC,gBAAK,CAACC,UAAU,CAACF,MAAM,CAAC,CAAA;AAKnC;;;;"}

package/lib/utils/storybook-helper.d.ts

@@ -1,5 +1,6 @@
 import '../styles/design-tokens.css';
 import * as React from 'react';
+import type { JSX } from 'react';
 import type { BoxProps } from '../box';
 import type { Space } from './common-types';
 type SelectTypeOptionsProp<T> = Extract<T, PropertyKey>[] | readonly Extract<T, PropertyKey>[];
@@ -45,11 +46,11 @@ declare function Wrapper({ title, children, border, }: {
     title?: React.ReactNode;
     children: React.ReactNode;
     border?: boolean;
-}): React.JSX.Element;
-declare function ResponsiveWidthRef(): React.JSX.Element;
+}): JSX.Element;
+declare function ResponsiveWidthRef(): JSX.Element;
 declare function Placeholder({ label, width, height, }: {
     label?: React.ReactNode;
-} & Pick<React.CSSProperties, 'width' | 'height'>): React.JSX.Element;
+} & Pick<React.CSSProperties, 'width' | 'height'>): JSX.Element;
 type PartialProps<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = Partial<React.ComponentProps<T>>;
 export { disableResponsiveProps, Placeholder, ResponsiveWidthRef, reusableBoxProps, select, selectCount, selectSize, selectWithNone, times, Wrapper, };
 export type { PartialProps };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
-    "version": "33.1.0",
+    "version": "33.2.0",
     "repository": "https://github.com/Doist/reactist",
     "homepage": "https://github.com/Doist/reactist#readme",
     "bugs": {
@@ -38,7 +38,7 @@
     "scripts": {
         "postinstall": "patch-package",
         "setup": "npm install && npm run validate",
-        "validate": "npm run lint && npm run type-check && npm run test",
+        "validate": "npm run lint && npm run type-check && npm run type-check:react18 && npm run test && npm run test:react18",
         "start": "ON_SUCCESS=\"./scripts/organize-styles.sh\" rollup -c --watch --no-watch.clearScreen",
         "prestart:yalc": "npm run clean && yalc publish",
         "start:yalc": "ON_SUCCESS=\"npm run start:yalc:success\" rollup -c --watch --no-watch.clearScreen",
@@ -49,8 +49,11 @@
         "clean": "rimraf es lib styles dist",
         "test": "jest --passWithNoTests",
         "test:watch": "npm run test -- --watch",
+        "test:react18": "jest --config jest.config.react18.js",
+        "test:react18:watch": "npm run test:react18 -- --watch",
         "test:coverage": "npm run test -- --coverage",
         "type-check": "tsc --noEmit -p ./tsconfig.json",
+        "type-check:react18": "tsc --noEmit -p ./tsconfig.react18.json",
         "lint": "eslint --format codeframe --cache --ext js,jsx,ts,tsx ./",
         "storybook": "storybook dev -p 6006",
         "prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\"",
@@ -59,10 +62,9 @@
     "peerDependencies": {
         "@ariakit/react": "~0.4.19",
         "classnames": "^2.2.5",
-        "prop-types": "^15.6.2",
-        "react": ">=18.0.0 <19.0.0",
+        "react": ">=18.0.0 <20.0.0",
         "react-compiler-runtime": "^1.0.0",
-        "react-dom": ">=18.0.0 <19.0.0"
+        "react-dom": ">=18.0.0 <20.0.0"
     },
     "devDependencies": {
         "@ariakit/react": "0.4.19",
@@ -95,8 +97,10 @@
         "@types/jest": "28.1.8",
         "@types/jest-axe": "^3.5.3",
         "@types/marked": "^4.0.8",
-        "@types/react": "18.3.1",
-        "@types/react-dom": "18.3.0",
+        "@types/react": "19.2.17",
+        "@types/react-18": "npm:@types/react@^18.3",
+        "@types/react-dom": "19.2.3",
+        "@types/react-dom-18": "npm:@types/react-dom@^18.3",
         "@typescript-eslint/eslint-plugin": "8.46.2",
         "@typescript-eslint/parser": "8.46.2",
         "@vitejs/plugin-react": "5.2.0",
@@ -125,11 +129,13 @@
         "mockdate": "^3.0.2",
         "plop": "^3.1.1",
         "prettier": "3.6.2",
-        "react": "18.3.1",
+        "react": "19.2.7",
+        "react-18": "npm:react@18.3.1",
         "react-compiler-runtime": "1.0.0",
-        "react-dom": "18.3.1",
         "react-docgen-typescript": "2.4.0",
-        "react-is": "18.3.1",
+        "react-dom": "19.2.7",
+        "react-dom-18": "npm:react-dom@18.3.1",
+        "react-is": "19.2.7",
         "rimraf": "^3.0.2",
         "rollup": "2.79.2",
         "rollup-plugin-styles": "4.0.0",
@@ -154,6 +160,12 @@
         "pretty-format": {
             "react-is": "$react-is"
         },
-        "react-element-to-jsx-string": "15.0.0"
+        "react-element-to-jsx-string": "15.0.0",
+        "react-dom-18": {
+            "react": "$react"
+        },
+        "@types/react-dom-18": {
+            "@types/react": "$@types/react"
+        }
     }
 }