@doist/reactist 24.2.0-beta → 25.0.0-beta.1

package/lib/components/deprecated-dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n    onShowBody?: () => void\n    onHideBody?: () => void\n    allowBodyInteractions?: boolean\n    top?: boolean\n    right?: boolean\n    scrolling_parent?: string\n    children?: [\n        React.ReactElement<TriggerProps>,\n        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n    ]\n    className?: string\n}\n\ntype BoxState = {\n    top: boolean\n    showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n    public static displayName: string\n\n    constructor(props: BoxProps, context: React.Context<unknown>) {\n        super(props, context)\n        this.state = {\n            showBody: false,\n            top: props.top || false,\n        }\n\n        this._timeout = undefined\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this._handleClickOutside, true)\n        if (this._timeout) {\n            clearTimeout(this._timeout)\n        }\n    }\n    _timeout?: ReturnType<typeof setTimeout>\n\n    _handleClickOutside = (event: MouseEvent) => {\n        const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n        if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n            this._toggleShowBody()\n        else if (!this.props.allowBodyInteractions) {\n            // won't close when body interactions are allowed\n            this._timeout = setTimeout(() => {\n                if (this.state.showBody) {\n                    this._toggleShowBody()\n                }\n            }, 100)\n        }\n    }\n\n    _toggleShowBody = () => {\n        if (!this.state.showBody) {\n            // will show\n            if (this.props.onShowBody) this.props.onShowBody()\n            document.addEventListener('click', this._handleClickOutside, true)\n        } else {\n            // will hide\n            if (this.props.onHideBody) this.props.onHideBody()\n            document.removeEventListener('click', this._handleClickOutside, true)\n        }\n\n        this.setState({\n            showBody: !this.state.showBody,\n        })\n    }\n\n    _getTriggerComponent() {\n        const _trigger = this.props.children?.[0]\n        return _trigger\n            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n            : undefined\n    }\n\n    // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n    _setPosition = (body: HTMLElement | null) => {\n        if (body) {\n            const scrollingParent = document.getElementById(\n                this.props.scrolling_parent ? this.props.scrolling_parent : '',\n            )\n\n            if (scrollingParent) {\n                const dropdown = ReactDOM.findDOMNode(this)\n                if (!dropdown) {\n                    return\n                }\n                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n                    .offsetTop\n                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n                if (!dropdownTrigger) {\n                    return\n                }\n                const dropdownTriggerHeight = dropdownTrigger.clientHeight\n                const dropdownBodyHeight = body.clientHeight\n\n                const scrollingParentHeight = scrollingParent.clientHeight\n                const scrollingParentOffset = scrollingParent.scrollTop\n\n                const bottomOffset =\n                    scrollingParentHeight +\n                    scrollingParentOffset -\n                    dropdownVerticalPosition -\n                    dropdownTriggerHeight\n\n                const top = bottomOffset < dropdownBodyHeight\n\n                if (top !== this.state.top) {\n                    this.setState({ top })\n                }\n            }\n        }\n    }\n\n    _getBodyComponent() {\n        if (!this.state.showBody) {\n            return null\n        }\n        const { top } = this.state\n        const { right = false, children } = this.props\n        const props = { top, right, setPosition: this._setPosition }\n\n        const className = classNames({\n            body_wrapper: true,\n            with_arrow: true,\n            top: top,\n            bottom: !top,\n        })\n\n        const body = children?.[1]\n\n        const contentMarkup =\n            typeof body === 'function'\n                ? body(props)\n                : body\n                ? React.cloneElement(body, props)\n                : undefined\n        return (\n            <div className={className} style={{ position: 'relative' }}>\n                {contentMarkup}\n            </div>\n        )\n    }\n\n    render() {\n        const className = classNames('reactist_dropdown', this.props.className)\n        const { top } = this.state\n\n        return (\n            <div\n                style={{ display: 'inline-block' }}\n                className={className}\n                data-testid=\"reactist-dropdown-box\"\n            >\n                {top && this._getBodyComponent()}\n                {this._getTriggerComponent()}\n                {!top && this._getBodyComponent()}\n            </div>\n        )\n    }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n    tooltip?: React.ReactNode\n    /**\n     * @private the onClick prop is not to be used externally\n     */\n    onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n    { children, onClick, tooltip, className, ...props },\n    ref,\n) {\n    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n        event.preventDefault()\n        event.stopPropagation()\n        if (onClick) onClick(event)\n    }\n\n    return (\n        <Button\n            {...props}\n            className={classNames('trigger', className)}\n            onClick={handleClick}\n            tooltip={tooltip}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n    setPosition?: React.Ref<HTMLDivElement>\n    children?: React.ReactNode\n    top?: boolean\n    right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n    if (top) {\n        style.top = 'auto'\n        style.bottom = 0\n    }\n\n    if (right) {\n        style.right = 'auto'\n        style.left = 0\n    }\n\n    return (\n        <div\n            ref={setPosition}\n            style={style}\n            className=\"body\"\n            id=\"reactist-dropdown-body\"\n            data-testid=\"reactist-dropdown-body\"\n        >\n            {children}\n        </div>\n    )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n    Box,\n    Trigger,\n    Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import * as React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n    onShowBody?: () => void\n    onHideBody?: () => void\n    allowBodyInteractions?: boolean\n    top?: boolean\n    right?: boolean\n    scrolling_parent?: string\n    children?: [\n        React.ReactElement<TriggerProps>,\n        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n    ]\n    className?: string\n}\n\ntype BoxState = {\n    top: boolean\n    showBody: boolean\n}\n\nclass Box extends React.Component<BoxProps, BoxState> {\n    public static displayName: string\n\n    constructor(props: BoxProps, context: React.Context<unknown>) {\n        super(props, context)\n        this.state = {\n            showBody: false,\n            top: props.top || false,\n        }\n\n        this._timeout = undefined\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this._handleClickOutside, true)\n        if (this._timeout) {\n            clearTimeout(this._timeout)\n        }\n    }\n    _timeout?: ReturnType<typeof setTimeout>\n\n    _handleClickOutside = (event: MouseEvent) => {\n        const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n        if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n            this._toggleShowBody()\n        else if (!this.props.allowBodyInteractions) {\n            // won't close when body interactions are allowed\n            this._timeout = setTimeout(() => {\n                if (this.state.showBody) {\n                    this._toggleShowBody()\n                }\n            }, 100)\n        }\n    }\n\n    _toggleShowBody = () => {\n        if (!this.state.showBody) {\n            // will show\n            if (this.props.onShowBody) this.props.onShowBody()\n            document.addEventListener('click', this._handleClickOutside, true)\n        } else {\n            // will hide\n            if (this.props.onHideBody) this.props.onHideBody()\n            document.removeEventListener('click', this._handleClickOutside, true)\n        }\n\n        this.setState({\n            showBody: !this.state.showBody,\n        })\n    }\n\n    _getTriggerComponent() {\n        const _trigger = this.props.children?.[0]\n        return _trigger\n            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n            : undefined\n    }\n\n    // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n    _setPosition = (body: HTMLElement | null) => {\n        if (body) {\n            const scrollingParent = document.getElementById(\n                this.props.scrolling_parent ? this.props.scrolling_parent : '',\n            )\n\n            if (scrollingParent) {\n                const dropdown = ReactDOM.findDOMNode(this)\n                if (!dropdown) {\n                    return\n                }\n                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n                    .offsetTop\n                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n                if (!dropdownTrigger) {\n                    return\n                }\n                const dropdownTriggerHeight = dropdownTrigger.clientHeight\n                const dropdownBodyHeight = body.clientHeight\n\n                const scrollingParentHeight = scrollingParent.clientHeight\n                const scrollingParentOffset = scrollingParent.scrollTop\n\n                const bottomOffset =\n                    scrollingParentHeight +\n                    scrollingParentOffset -\n                    dropdownVerticalPosition -\n                    dropdownTriggerHeight\n\n                const top = bottomOffset < dropdownBodyHeight\n\n                if (top !== this.state.top) {\n                    this.setState({ top })\n                }\n            }\n        }\n    }\n\n    _getBodyComponent() {\n        if (!this.state.showBody) {\n            return null\n        }\n        const { top } = this.state\n        const { right = false, children } = this.props\n        const props = { top, right, setPosition: this._setPosition }\n\n        const className = classNames({\n            body_wrapper: true,\n            with_arrow: true,\n            top: top,\n            bottom: !top,\n        })\n\n        const body = children?.[1]\n\n        const contentMarkup =\n            typeof body === 'function'\n                ? body(props)\n                : body\n                ? React.cloneElement(body, props)\n                : undefined\n        return (\n            <div className={className} style={{ position: 'relative' }}>\n                {contentMarkup}\n            </div>\n        )\n    }\n\n    render() {\n        const className = classNames('reactist_dropdown', this.props.className)\n        const { top } = this.state\n\n        return (\n            <div\n                style={{ display: 'inline-block' }}\n                className={className}\n                data-testid=\"reactist-dropdown-box\"\n            >\n                {top && this._getBodyComponent()}\n                {this._getTriggerComponent()}\n                {!top && this._getBodyComponent()}\n            </div>\n        )\n    }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {\n    tooltip?: React.ReactNode\n    /**\n     * @private the onClick prop is not to be used externally\n     */\n    onClick?: NativeButtonProps['onClick']\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n    { children, onClick, tooltip, className, ...props },\n    ref,\n) {\n    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n        event.preventDefault()\n        event.stopPropagation()\n        if (onClick) onClick(event)\n    }\n\n    return (\n        <Button\n            {...props}\n            className={classNames('trigger', className)}\n            onClick={handleClick}\n            tooltip={tooltip}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n    setPosition?: React.Ref<HTMLDivElement>\n    children?: React.ReactNode\n    top?: boolean\n    right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n    if (top) {\n        style.top = 'auto'\n        style.bottom = 0\n    }\n\n    if (right) {\n        style.right = 'auto'\n        style.left = 0\n    }\n\n    return (\n        <div\n            ref={setPosition}\n            style={style}\n            className=\"body\"\n            id=\"reactist-dropdown-body\"\n            data-testid=\"reactist-dropdown-body\"\n        >\n            {children}\n        </div>\n    )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n    Box,\n    Trigger,\n    Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}

package/lib/components/deprecated-input/input.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import './input.less';
-declare type InputProps = {
-    /** Additional css class applied to the input. */
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
     className?: string;
-    ref?: React.Ref<HTMLInputElement>;
-};
-declare type Props = InputProps & React.InputHTMLAttributes<HTMLInputElement>;
-declare const Input: React.FC<React.PropsWithRef<Props>>;
+}
+/**
+ * @deprecated
+ */
+declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/lib/components/deprecated-input/input.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),a=(e(t),e(require("classnames")));const s=t.forwardRef((e,s)=>{const u=a("reactist_input",e.className);return t.createElement("input",r.objectSpread2(r.objectSpread2({},e),{},{className:u,ref:s}))});s.displayName="Input",exports.Input=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),a=(e(r),e(require("classnames")));const u=r.forwardRef((function(e,u){const s=a("reactist_input",e.className);return r.createElement("input",t.objectSpread2(t.objectSpread2({},e),{},{className:s,ref:u}))}));u.displayName="Input",exports.Input=u;
 //# sourceMappingURL=input.js.map

package/lib/components/deprecated-input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/deprecated-input/input.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\ntype InputProps = {\n    /** Additional css class applied to the input. */\n    className?: string\n    ref?: React.Ref<HTMLInputElement>\n}\n\ntype Props = InputProps & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input: React.FC<React.PropsWithRef<Props>> = React.forwardRef(\n    (props: Props, ref: React.Ref<HTMLInputElement>) => {\n        const className = classNames('reactist_input', props.className)\n        return <input {...props} className={className} ref={ref} />\n    },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":["Input","React","props","ref","className","classNames","displayName"],"mappings":"kQAaMA,EAA6CC,aAC/C,CAACC,EAAcC,KACX,MAAMC,EAAYC,EAAW,iBAAkBH,EAAME,WACrD,OAAOH,2DAAWC,OAAOE,UAAWA,EAAWD,IAAKA,OAG5DH,EAAMM,YAAc"}
+{"version":3,"file":"input.js","sources":["../../../src/components/deprecated-input/input.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\ninterface Props extends React.InputHTMLAttributes<HTMLInputElement> {\n    className?: string\n}\n\n/**\n * @deprecated\n */\nconst Input = React.forwardRef<HTMLInputElement, Props>(function Input(props, ref) {\n    const className = classNames('reactist_input', props.className)\n    return <input {...props} className={className} ref={ref} />\n})\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":["Input","React","props","ref","className","classNames","displayName"],"mappings":"kQAYMA,EAAQC,cAA0C,SAAeC,EAAOC,GAC1E,MAAMC,EAAYC,EAAW,iBAAkBH,EAAME,WACrD,OAAOH,2DAAWC,OAAOE,UAAWA,EAAWD,IAAKA,QAExDH,EAAMM,YAAc"}

package/lib/components/deprecated-select/select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import './select.less';
 declare type Option = {
     /** Optional key for each option. If not provided `value` is used. */
@@ -22,7 +22,7 @@ declare type Props = {
     /** Value to initially be set */
     defaultValue?: string | number;
 };
-declare function Select({ value, options, onChange, disabled, className, defaultValue, ...otherProps }: Props): JSX.Element;
+declare function Select({ value, options, onChange, disabled, className, defaultValue, ...otherProps }: Props): React.JSX.Element;
 declare namespace Select {
     var displayName: string;
     var defaultProps: {

package/lib/components/icons/CloseIcon.svg.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const CloseIcon: () => JSX.Element;
+import * as React from 'react';
+declare const CloseIcon: () => React.JSX.Element;
 export default CloseIcon;

package/lib/components/icons/ThinQuestionMarkIcon.svg.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const ThinQuestionMark: () => JSX.Element;
+import * as React from 'react';
+declare const ThinQuestionMark: () => React.JSX.Element;
 export default ThinQuestionMark;

package/lib/components/icons/ThreeDotsIcon.svg.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import PropTypes from 'prop-types';
 declare const ThreeDotsIcon: {
     ({ color }: {
         color?: string | undefined;
-    }): JSX.Element;
+    }): React.JSX.Element;
     propTypes: {
         /** Color of the icon. */
         color: PropTypes.Requireable<string>;

package/lib/components/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -37,7 +37,7 @@ declare type Props = Omit<NativeSpanProps, 'children'> & {
      */
     isMac?: boolean;
 };
-declare function KeyboardShortcut({ children, className, translateKey, isMac, ...props }: Props): JSX.Element;
+declare function KeyboardShortcut({ children, className, translateKey, isMac, ...props }: Props): React.JSX.Element;
 declare namespace KeyboardShortcut {
     var setTranslateKey: (tr: (key: string) => string) => void;
 }

package/lib/components/progress-bar/progress-bar.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import './progress-bar.less';
 declare type Props = {
     /** Additional css class applied to the progress bar. */
@@ -8,7 +8,7 @@ declare type Props = {
     /** Defines the human readable text alternative for assitive technologies. */
     'aria-valuetext'?: string;
 };
-declare function ProgressBar({ fillPercentage, className, 'aria-valuetext': ariaValuetext }: Props): JSX.Element;
+declare function ProgressBar({ fillPercentage, className, 'aria-valuetext': ariaValuetext }: Props): React.JSX.Element;
 declare namespace ProgressBar {
     var displayName: string;
 }

package/lib/components/time/time.d.ts

@@ -34,6 +34,6 @@ declare class Time extends React.Component<Props, State> {
     _setHovered(hovered: boolean, event: React.MouseEvent): void;
     _renderTime(config: Props['config']): string | undefined;
     _refresh(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export { Time };

package/lib/divider/divider.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { DividerWeight } from '../utils/common-types';
 interface DividerProps {
     weight?: Exclude<DividerWeight, 'none'>;
 }
-declare function Divider({ weight, ...props }: DividerProps): JSX.Element;
+declare function Divider({ weight, ...props }: DividerProps): React.JSX.Element;
 export type { DividerProps, DividerWeight };
 export { Divider };

package/lib/heading/heading.d.ts

@@ -1,16 +1,8 @@
 import * as React from 'react';
-import type { ObfuscatedClassName } from '../utils/polymorphism';
-import type { Tone } from '../utils/common-types';
+import type { ObfuscatedClassName, Tone } from '../utils/common-types';
 import type { BoxProps } from '../box';
 declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6';
-declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-/**
- * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.
- * Once we upgrade Reactist to the newest React types, we should be able to remove these.
- */
-declare type DeprecatedProps = 'placeholder' | 'onPointerEnterCapture' | 'onPointerLeaveCapture';
-declare type SupportedHeadingElementProps = Omit<JSX.IntrinsicElements[HeadingElement], 'className' | 'children' | DeprecatedProps>;
-declare type HeadingProps = SupportedHeadingElementProps & {
+declare type HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {
     children: React.ReactNode;
     /**
      * The semantic level of the heading.
@@ -63,7 +55,7 @@ declare type HeadingProps = SupportedHeadingElementProps & {
      */
     align?: BoxProps['textAlign'];
 };
-declare const Heading: React.ForwardRefExoticComponent<Pick<SupportedHeadingElementProps & {
+declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "className" | "children"> & {
     children: React.ReactNode;
     /**
      * The semantic level of the heading.
@@ -115,6 +107,6 @@ declare const Heading: React.ForwardRefExoticComponent<Pick<SupportedHeadingElem
      * @default 'start'
      */
     align?: BoxProps['textAlign'];
-} & ObfuscatedClassName, "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "level" | "weight" | "size" | "tone" | "lineClamp" | "align" | "exceptionallySetClassName"> & React.RefAttributes<HTMLHeadingElement>>;
+} & ObfuscatedClassName & React.RefAttributes<HTMLHeadingElement>>;
 export type { HeadingProps, HeadingLevel };
 export { Heading };

package/lib/heading/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName } from '../utils/polymorphism'\nimport type { Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\n/**\n * FIXME: This is a workaround for consumers that are using newer versions of React types that no longer have these props.\n * Once we upgrade Reactist to the newest React types, we should be able to remove these.\n */\ntype DeprecatedProps = 'placeholder' | 'onPointerEnterCapture' | 'onPointerLeaveCapture'\n\ntype SupportedHeadingElementProps = Omit<\n    JSX.IntrinsicElements[HeadingElement],\n    'className' | 'children' | DeprecatedProps\n>\n\ntype HeadingProps = SupportedHeadingElementProps & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'medium' | 'light'\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"+WA4EgBA,cACZ,WAYIC,OAXAC,MACIA,EADJC,OAEIA,EAAS,UAFbC,KAGIA,EAHJC,KAIIA,EAAO,SAJXC,SAKIA,EALJC,UAMIA,EANJC,MAOIA,EAPJC,0BAQIA,KACGC,iCAMP,MAAMC,MAAyBT,EACzBU,EACmB,iBAAdL,EAAyBM,SAASN,EAAW,IAAM,GAAKA,GAAa,GAAK,EAErF,OACIP,gBAACc,yCACOJ,OACJK,UAAW,CACPN,EACAO,UAAOC,QACI,YAAXd,EAAuBe,gBAAcF,UAAQ,SAAUb,GAAU,KACxD,WAATE,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1Da,gBAAcF,UAAQ,OAAQZ,GAC9BQ,EAAyBI,UAAOJ,uBAAyB,KACzDL,EAAYW,gBAAcF,UAAQ,YAAaT,EAAUY,YAAc,MAE3EC,UAAWZ,EAGXa,aAAcd,EAAY,cAAWe,EACrCC,GAAIZ,EACJV,IAAKA,IAEJK"}
+{"version":3,"file":"heading.js","sources":["../../src/heading/heading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../utils/responsive-props'\nimport { Box } from '../box'\nimport styles from './heading.module.css'\nimport type { ObfuscatedClassName, Tone } from '../utils/common-types'\nimport type { BoxProps } from '../box'\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'\ntype HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype HeadingProps = Omit<React.HTMLAttributes<HTMLHeadingElement>, 'className' | 'children'> & {\n    children: React.ReactNode\n    /**\n     * The semantic level of the heading.\n     */\n    level: HeadingLevel\n\n    /**\n     * The weight of the heading. Used to de-emphasize the heading visually when using 'medium' or 'light'.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'medium' | 'light'\n\n    /**\n     * Shifts the default heading visual text size up or down, depending on the original size\n     * imposed by the `level`. The heading continues to be semantically at the given level.\n     *\n     * By default, no value is applied, and the default size from the level is applied. The values\n     * have the following effect:\n     *\n     * - 'smaller' shifts the default level size down in the font-size scale (it tends to make the\n     * level look visually as if it were of the immediately lower level).\n     * - 'larger' has the opposite effect than 'smaller' shifting the visual font size up in the\n     * scale.\n     * - 'largest' can be thought of as applying 'larger' twice.\n     *\n     * @see level\n     * @default undefined\n     */\n    size?: 'smaller' | 'larger' | 'largest'\n\n    /**\n     * The tone (semantic color) of the heading.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n\n    /**\n     * Used to truncate the heading to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n\n    /**\n     * How to align the heading text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Heading = React.forwardRef<HTMLHeadingElement, HeadingProps & ObfuscatedClassName>(\n    function Heading(\n        {\n            level,\n            weight = 'regular',\n            size,\n            tone = 'normal',\n            children,\n            lineClamp,\n            align,\n            exceptionallySetClassName,\n            ...props\n        },\n        ref,\n    ) {\n        // In TypeScript v4.1, this would be properly recognized without needing the type assertion\n        // https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#template-literal-types\n        const headingElementName = `h${level}` as HeadingElement\n        const lineClampMultipleLines =\n            typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n        return (\n            <Box\n                {...props}\n                className={[\n                    exceptionallySetClassName,\n                    styles.heading,\n                    weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                    tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                    getClassNames(styles, 'size', size),\n                    lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                    lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n                ]}\n                textAlign={align}\n                // Prevents emojis from being cut-off\n                // See https://github.com/Doist/reactist/pull/528\n                paddingRight={lineClamp ? 'xsmall' : undefined}\n                as={headingElementName}\n                ref={ref}\n            >\n                {children}\n            </Box>\n        )\n    },\n)\n\nexport type { HeadingProps, HeadingLevel }\nexport { Heading }\n"],"names":["React","ref","level","weight","size","tone","children","lineClamp","align","exceptionallySetClassName","props","headingElementName","lineClampMultipleLines","parseInt","Box","className","styles","heading","getClassNames","toString","textAlign","paddingRight","undefined","as"],"mappings":"+WAqEgBA,cACZ,WAYIC,OAXAC,MACIA,EADJC,OAEIA,EAAS,UAFbC,KAGIA,EAHJC,KAIIA,EAAO,SAJXC,SAKIA,EALJC,UAMIA,EANJC,MAOIA,EAPJC,0BAQIA,KACGC,iCAMP,MAAMC,MAAyBT,EACzBU,EACmB,iBAAdL,EAAyBM,SAASN,EAAW,IAAM,GAAKA,GAAa,GAAK,EAErF,OACIP,gBAACc,yCACOJ,OACJK,UAAW,CACPN,EACAO,UAAOC,QACI,YAAXd,EAAuBe,gBAAcF,UAAQ,SAAUb,GAAU,KACxD,WAATE,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1Da,gBAAcF,UAAQ,OAAQZ,GAC9BQ,EAAyBI,UAAOJ,uBAAyB,KACzDL,EAAYW,gBAAcF,UAAQ,YAAaT,EAAUY,YAAc,MAE3EC,UAAWZ,EAGXa,aAAcd,EAAY,cAAWe,EACrCC,GAAIZ,EACJV,IAAKA,IAEJK"}

package/lib/icons/alert-icon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { AlertTone } from '../utils/common-types';
 declare function AlertIcon({ tone, ...props }: JSX.IntrinsicElements['svg'] & {
     tone: AlertTone;
-}): JSX.Element | null;
+}): React.JSX.Element | null;
 export { AlertIcon };

package/lib/icons/close-icon.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare function CloseIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+import * as React from 'react';
+declare function CloseIcon(props: JSX.IntrinsicElements['svg']): React.JSX.Element;
 export { CloseIcon };

package/lib/icons/password-hidden-icon.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare function PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+import * as React from 'react';
+declare function PasswordHiddenIcon(props: JSX.IntrinsicElements['svg']): React.JSX.Element;
 export { PasswordHiddenIcon };

package/lib/icons/password-visible-icon.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare function PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']): JSX.Element;
+import * as React from 'react';
+declare function PasswordVisibleIcon(props: JSX.IntrinsicElements['svg']): React.JSX.Element;
 export { PasswordVisibleIcon };

package/lib/index.d.ts

@@ -15,7 +15,6 @@ export * from './heading';
 export * from './text';
 export * from './prose';
 export * from './button';
-export * from './button-link';
 export * from './text-link';
 export * from './checkbox-field';
 export * from './password-field';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),r=require("./columns/columns.js"),t=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),n=require("./tooltip/tooltip.js"),d=require("./button/button.js"),u=require("./alert/alert.js"),p=require("./banner/banner.js"),x=require("./loading/loading.js"),l=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),b=require("./heading/heading.js"),T=require("./prose/prose.js"),M=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),f=require("./text-field/text-field.js"),S=require("./password-field/password-field.js"),g=require("./select-field/select-field.js"),B=require("./switch-field/switch-field.js"),h=require("./text-area/text-area.js"),P=require("./avatar/avatar.js"),v=require("./badge/badge.js"),C=require("./modal/modal.js"),y=require("./tabs/tabs.js"),w=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),L=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),D=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),R=require("./components/deprecated-input/index.js"),_=require("./components/deprecated-select/index.js");exports.Box=e.Box,exports.Column=r.Column,exports.Columns=r.Columns,exports.Divider=t.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=n.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Banner=p.Banner,exports.Loading=x.Loading,exports.Notice=l.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=b.Heading,exports.Prose=T.Prose,exports.ButtonLink=M.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=f.TextField,exports.PasswordField=S.PasswordField,exports.SelectField=g.SelectField,exports.SwitchField=B.SwitchField,exports.TextArea=h.TextArea,exports.Avatar=P.Avatar,exports.Badge=v.Badge,exports.Modal=C.Modal,exports.ModalActions=C.ModalActions,exports.ModalBody=C.ModalBody,exports.ModalCloseButton=C.ModalCloseButton,exports.ModalFooter=C.ModalFooter,exports.ModalHeader=C.ModalHeader,exports.Tab=y.Tab,exports.TabAwareSlot=y.TabAwareSlot,exports.TabList=y.TabList,exports.TabPanel=y.TabPanel,exports.Tabs=y.Tabs,exports.ContextMenuTrigger=w.ContextMenuTrigger,exports.Menu=w.Menu,exports.MenuButton=w.MenuButton,exports.MenuGroup=w.MenuGroup,exports.MenuItem=w.MenuItem,exports.MenuList=w.MenuList,exports.SubMenu=w.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=L.default,exports.COLORS=A.COLORS,exports.ColorPicker=D.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=R.default,exports.DeprecatedSelect=_.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),r=require("./columns/columns.js"),t=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),n=require("./tooltip/tooltip.js"),d=require("./button/button.js"),u=require("./alert/alert.js"),p=require("./banner/banner.js"),x=require("./loading/loading.js"),l=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),T=require("./heading/heading.js"),b=require("./prose/prose.js"),m=require("./text-link/text-link.js"),M=require("./checkbox-field/checkbox-field.js"),f=require("./text-field/text-field.js"),g=require("./password-field/password-field.js"),k=require("./select-field/select-field.js"),B=require("./switch-field/switch-field.js"),S=require("./text-area/text-area.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),P=require("./modal/modal.js"),v=require("./tabs/tabs.js"),y=require("./menu/menu.js"),w=require("./components/deprecated-button/index.js"),F=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),D=require("./components/keyboard-shortcut/index.js"),H=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),O=require("./components/progress-bar/index.js"),E=require("./components/time/index.js"),K=require("./components/deprecated-input/index.js"),N=require("./components/deprecated-select/index.js");exports.Box=e.Box,exports.getBoxClassNames=e.getBoxClassNames,exports.Column=r.Column,exports.Columns=r.Columns,exports.Divider=t.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=n.Tooltip,exports.Button=d.Button,exports.IconButton=d.IconButton,exports.Alert=u.Alert,exports.Banner=p.Banner,exports.Loading=x.Loading,exports.Notice=l.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=T.Heading,exports.Prose=b.Prose,exports.TextLink=m.TextLink,exports.CheckboxField=M.CheckboxField,exports.TextField=f.TextField,exports.PasswordField=g.PasswordField,exports.SelectField=k.SelectField,exports.SwitchField=B.SwitchField,exports.TextArea=S.TextArea,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=P.Modal,exports.ModalActions=P.ModalActions,exports.ModalBody=P.ModalBody,exports.ModalCloseButton=P.ModalCloseButton,exports.ModalFooter=P.ModalFooter,exports.ModalHeader=P.ModalHeader,exports.Tab=v.Tab,exports.TabAwareSlot=v.TabAwareSlot,exports.TabList=v.TabList,exports.TabPanel=v.TabPanel,exports.Tabs=v.Tabs,exports.ContextMenuTrigger=y.ContextMenuTrigger,exports.Menu=y.Menu,exports.MenuButton=y.MenuButton,exports.MenuGroup=y.MenuGroup,exports.MenuItem=y.MenuItem,exports.MenuList=y.MenuList,exports.SubMenu=y.SubMenu,exports.DeprecatedButton=w.default,exports.DeprecatedDropdown=F.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.default,exports.KeyboardShortcut=D.default,exports.SUPPORTED_KEYS=H.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=O.default,exports.Time=E.default,exports.DeprecatedInput=K.default,exports.DeprecatedSelect=N.default;
 //# sourceMappingURL=index.js.map

package/lib/loading/loading.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
+import * as React from 'react';
+import type { ObfuscatedClassName } from '../utils/common-types';
 declare type Size = 'xsmall' | 'small' | 'medium' | 'large';
-declare type NativeProps = Omit<JSX.IntrinsicElements['div'], 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
-declare type LoadingProps = NativeProps & {
+declare type NativeProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
+declare type LoadingProps = NativeProps & ObfuscatedClassName & {
     /**
      * The size of the loading spinner.
      * @default 'small'
      */
     size?: Size;
     /**
-     * A escape hatch in case you need to provide a custom class name to the container element.
+     * Identifies the element (or elements) that describes the loading component for assistive technologies.
      */
-    exceptionallySetClassName?: string;
-    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */
     'aria-describedby'?: string;
 } & ({
     /** Defines a string value that labels the current loading component for assistive technologies. */
@@ -22,6 +21,6 @@ declare type LoadingProps = NativeProps & {
     'aria-labelledby': string;
     'aria-label'?: never;
 });
-declare function Loading({ size, exceptionallySetClassName, ...props }: LoadingProps): JSX.Element;
+declare function Loading({ size, exceptionallySetClassName, ...props }: LoadingProps): React.JSX.Element;
 export { Loading };
 export type { LoadingProps };

package/lib/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    JSX.IntrinsicElements['div'],\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps & {\n    /**\n     * The size of the loading spinner.\n     * @default 'small'\n     */\n    size?: Size\n    /**\n     * A escape hatch in case you need to provide a custom class name to the container element.\n     */\n    exceptionallySetClassName?: string\n    /** Identifies the element (or elements) that describes the loading component for assistive technologies. */\n    'aria-describedby'?: string\n} & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"4PAoCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAiBC,KAAEA,EAAO,QAATC,0BAAkBA,KAA8BC,iCAC7D,MAAMC,WAAcR,EAAYK,MAASL,EAAYE,MAC/CO,EAAYF,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPG,EADA,WAGN,OACIC,gBAACC,yCACOL,oBACQE,EACZI,UAAWP,EACXQ,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQb,KAAMG"}
+{"version":3,"file":"loading.js","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype Size = 'xsmall' | 'small' | 'medium' | 'large'\n\ntype NativeProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'\n>\n\ntype LoadingProps = NativeProps &\n    ObfuscatedClassName & {\n        /**\n         * The size of the loading spinner.\n         * @default 'small'\n         */\n        size?: Size\n\n        /**\n         * Identifies the element (or elements) that describes the loading component for assistive technologies.\n         */\n        'aria-describedby'?: string\n    } & (\n        | {\n              /** Defines a string value that labels the current loading component for assistive technologies. */\n              'aria-label': string\n              'aria-labelledby'?: never\n          }\n        | {\n              /** Identifies the element (or elements) that labels the current loading component for assistive technologies. */\n              'aria-labelledby': string\n              'aria-label'?: never\n          }\n    )\n\nconst sizeMapping: Record<Size, number> = {\n    xsmall: 16,\n    small: 24,\n    medium: 36,\n    large: 48,\n}\n\nfunction Loading({ size = 'small', exceptionallySetClassName, ...props }: LoadingProps) {\n    const numericSize = sizeMapping[size] ?? sizeMapping.small\n    const ariaLabel = props['aria-label']\n        ? props['aria-label']\n        : !props['aria-labelledby']\n        ? 'Loading…'\n        : undefined\n\n    return (\n        <Box\n            {...props}\n            aria-label={ariaLabel}\n            className={exceptionallySetClassName}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            role=\"progressbar\"\n        >\n            <Spinner size={numericSize} aria-hidden />\n        </Box>\n    )\n}\n\nexport { Loading }\nexport type { LoadingProps }\n"],"names":["sizeMapping","xsmall","small","medium","large","size","exceptionallySetClassName","props","numericSize","ariaLabel","undefined","React","Box","className","display","alignItems","justifyContent","role","Spinner"],"mappings":"4PAqCMA,EAAoC,CACtCC,OAAQ,GACRC,MAAO,GACPC,OAAQ,GACRC,MAAO,oBAGX,sBAAiBC,KAAEA,EAAO,QAATC,0BAAkBA,KAA8BC,iCAC7D,MAAMC,WAAcR,EAAYK,MAASL,EAAYE,MAC/CO,EAAYF,EAAM,cAClBA,EAAM,cACLA,EAAM,wBAEPG,EADA,WAGN,OACIC,gBAACC,yCACOL,oBACQE,EACZI,UAAWP,EACXQ,QAAQ,OACRC,WAAW,SACXC,eAAe,SACfC,KAAK,gBAELN,gBAACO,WAAQb,KAAMG"}

package/lib/menu/menu.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { MenuStoreProps, MenuProps as AriakitMenuProps, MenuButtonProps as AriakitMenuButtonProps } from '@ariakit/react';
+import { MenuStoreProps, MenuProps as AriakitMenuProps, MenuItemProps as AriakitMenuItemProps, MenuButtonProps as AriakitMenuButtonProps, RoleProps } from '@ariakit/react';
 import './menu.less';
-declare type NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>;
-declare type MenuProps = Omit<MenuStoreProps, 'visible'> & {
+import type { ObfuscatedClassName } from '../utils/common-types';
+interface MenuProps extends Omit<MenuStoreProps, 'visible'> {
     /**
      * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a
      * `MenuButton` that triggers the menu to be opened or closed.
@@ -16,34 +16,34 @@ declare type MenuProps = Omit<MenuStoreProps, 'visible'> & {
      * change on every render.
      */
     onItemSelect?: (value: string | null | undefined) => void;
-};
+}
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
  */
-declare function Menu({ children, onItemSelect, ...props }: MenuProps): JSX.Element;
-declare type MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>;
+declare function Menu({ children, onItemSelect, ...props }: MenuProps): React.JSX.Element;
+interface MenuButtonProps extends Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>, ObfuscatedClassName {
+}
 /**
  * A button to toggle a dropdown menu open or closed.
  */
-declare const MenuButton: import("../utils/polymorphism").PolymorphicComponent<"button", MenuButtonProps, "obfuscateClassName">;
-declare const ContextMenuTrigger: import("../utils/polymorphism").PolymorphicComponent<"div", unknown, "obfuscateClassName">;
-declare type MenuListProps = Omit<AriakitMenuProps, 'store' | 'className'>;
+declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface ContextMenuTriggerProps extends ObfuscatedClassName, React.HTMLAttributes<HTMLDivElement>, Pick<RoleProps, 'render'> {
+}
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuTriggerProps & React.RefAttributes<HTMLDivElement>>;
+interface MenuListProps extends Omit<AriakitMenuProps, 'store' | 'className'>, ObfuscatedClassName {
+}
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
-declare const MenuList: import("../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
-declare type MenuItemProps = {
+declare const MenuList: React.ForwardRefExoticComponent<Omit<MenuListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {
     /**
      * An optional value given to this menu item. It is passed on to the parent `Menu`'s
      * `onItemSelect` when you provide that instead of (or alongside) providing individual
      * `onSelect` callbacks to each menu item.
      */
     value?: string;
-    /**
-     * The content inside the menu item.
-     */
-    children: React.ReactNode;
     /**
      * When `true` the menu item is disabled and won't be selectable or be part of the keyboard
      * navigation across the menu options.
@@ -82,12 +82,12 @@ declare type MenuItemProps = {
      * under some circumstances.
      */
     onClick?: (event: React.MouseEvent) => void;
-};
+}
 /**
  * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`
  * callback.
  */
-declare const MenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", MenuItemProps, "obfuscateClassName">;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>;
 /**
  * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
@@ -111,18 +111,18 @@ declare type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>;
  * opening a sub-menu with the menu items list below it.
  */
 declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>>;
-declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
+interface MenuGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>, ObfuscatedClassName {
     /**
      * A label to be shown visually and also used to semantically label the group.
      */
     label: string;
-};
+}
 /**
  * A way to semantically group some menu items.
  *
  * This group does not add any visual separator. You can do that yourself adding `<hr />` elements
  * before and/or after the group if you so wish.
  */
-declare const MenuGroup: import("../utils/polymorphism").PolymorphicComponent<"div", MenuGroupProps, "obfuscateClassName">;
+declare const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup };
 export type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps };

package/lib/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),r=require("../utils/polymorphism.js"),l=require("@ariakit/react");const c=["children","onItemSelect"],a=["exceptionallySetClassName"],u=["as"],s=["exceptionallySetClassName","modal"],i=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],p=["label","children","exceptionallySetClassName"],m=n.createContext({});function d(e){let{children:o,onItemSelect:r}=e,a=t.objectWithoutProperties(e,c);const[u,s]=n.useState(null),i=n.useMemo(()=>u?()=>u:null,[u]),p=l.useMenuStore(t.objectSpread2({focusLoop:!0},a)),d=n.useMemo(()=>({menuStore:p,handleItemSelect:r,getAnchorRect:i,setAnchorRect:s}),[p,r,i,s]);return n.createElement(m.Provider,{value:d},o)}const S=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,a);const{menuStore:s}=n.useContext(m);return n.createElement(l.MenuButton,t.objectSpread2(t.objectSpread2({},u),{},{store:s,ref:r,className:o("reactist_menubutton",c)}))})),h=r.polymorphicComponent((function(e,o){let{as:r="div"}=e,l=t.objectWithoutProperties(e,u);const{setAnchorRect:c,menuStore:a}=n.useContext(m),s=n.useCallback((function(e){e.preventDefault(),c({x:e.clientX,y:e.clientY}),a.show()}),[c,a]),i=a.useState("open");return n.useEffect(()=>{i||c(null)},[i,c]),n.createElement(r,t.objectSpread2(t.objectSpread2({},l),{},{onContextMenu:s,ref:o}))})),C=r.polymorphicComponent((function(e,r){let{exceptionallySetClassName:c,modal:a=!0}=e,u=t.objectWithoutProperties(e,s);const{menuStore:i,getAnchorRect:p}=n.useContext(m);return i.useState("open")?n.createElement(l.Portal,{preserveTabOrder:!0},n.createElement(l.Menu,t.objectSpread2(t.objectSpread2({},u),{},{store:i,gutter:8,shift:4,ref:r,className:o("reactist_menulist",c),getAnchorRect:null!=p?p:void 0,modal:a}))):null})),b=r.polymorphicComponent((function(e,o){let{value:r,children:c,onSelect:a,hideOnSelect:u=!0,onClick:s,exceptionallySetClassName:p,as:d="button"}=e,S=t.objectWithoutProperties(e,i);const{handleItemSelect:h,menuStore:C}=n.useContext(m),{hide:b}=C,f=n.useCallback((function(e){null==s||s(e);const t=!1!==(a&&!e.defaultPrevented?a():void 0)&&u;null==h||h(r),t&&b()}),[a,s,h,u,b,r]);return n.createElement(l.MenuItem,t.objectSpread2(t.objectSpread2({},S),{},{as:d,store:C,ref:o,onClick:f,className:p,hideOnClick:!1}),c)})),f=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:r,menuStore:c}=n.useContext(m),{hide:a}=c,u=n.useCallback((function(e){null==t||t(e),null==r||r(e),a()}),[a,r,t]),[s,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(s,e)}),[s]);return n.createElement(d,{onItemSelect:u},n.createElement(l.MenuItem,{as:"div",store:c,ref:o,hideOnClick:!1},p),i)})),x=r.polymorphicComponent((function(e,o){let{label:r,children:c,exceptionallySetClassName:a}=e,u=t.objectWithoutProperties(e,p);const{menuStore:s}=n.useContext(m);return n.createElement(l.MenuGroup,t.objectSpread2(t.objectSpread2({},u),{},{ref:o,store:s,className:a}),r?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,c)}));exports.ContextMenuTrigger=h,exports.Menu=d,exports.MenuButton=S,exports.MenuGroup=x,exports.MenuItem=b,exports.MenuList=C,exports.SubMenu=f;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),n=(e(r),e(require("classnames"))),o=require("@ariakit/react");const l=["children","onItemSelect"],u=["exceptionallySetClassName"],c=["render"],a=["exceptionallySetClassName","modal"],s=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],i=["label","children","exceptionallySetClassName"],d=r.createContext({menuStore:null,handleItemSelect:()=>{},getAnchorRect:null,setAnchorRect:()=>{}});function p(e){let{children:n,onItemSelect:u}=e,c=t.objectWithoutProperties(e,l);const[a,s]=r.useState(null),i=r.useMemo(()=>a?()=>a:null,[a]),p=o.useMenuStore(t.objectSpread2({focusLoop:!0},c)),m=r.useMemo(()=>({menuStore:p,handleItemSelect:u,getAnchorRect:i,setAnchorRect:s}),[p,u,i,s]);return r.createElement(d.Provider,{value:m},n)}const m=r.forwardRef((function(e,l){let{exceptionallySetClassName:c}=e,a=t.objectWithoutProperties(e,u);const{menuStore:s}=r.useContext(d);if(!s)throw new Error("MenuButton must be wrapped in <Menu/>");return r.createElement(o.MenuButton,t.objectSpread2(t.objectSpread2({},a),{},{store:s,ref:l,className:n("reactist_menubutton",c)}))})),f=r.forwardRef((function(e,n){let{render:l}=e,u=t.objectWithoutProperties(e,c);const{setAnchorRect:a,menuStore:s}=r.useContext(d);if(!s)throw new Error("ContextMenuTrigger must be wrapped in <Menu/>");const i=r.useCallback((function(e){e.preventDefault(),a({x:e.clientX,y:e.clientY}),s.show()}),[a,s]),p=s.useState("open");return r.useEffect(()=>{p||a(null)},[p,a]),r.createElement(o.Role.div,t.objectSpread2(t.objectSpread2({},u),{},{onContextMenu:i,ref:n,render:l}))})),S=r.forwardRef((function(e,l){let{exceptionallySetClassName:u,modal:c=!0}=e,s=t.objectWithoutProperties(e,a);const{menuStore:i,getAnchorRect:p}=r.useContext(d);if(!i)throw new Error("MenuList must be wrapped in <Menu/>");return i.useState("open")?r.createElement(o.Portal,{preserveTabOrder:!0},r.createElement(o.Menu,t.objectSpread2(t.objectSpread2({},s),{},{store:i,gutter:8,shift:4,ref:l,className:n("reactist_menulist",u),getAnchorRect:null!=p?p:void 0,modal:c}))):null})),h=r.forwardRef((function(e,n){let{value:l,children:u,onSelect:c,hideOnSelect:a=!0,onClick:i,exceptionallySetClassName:p}=e,m=t.objectWithoutProperties(e,s);const{handleItemSelect:f,menuStore:S}=r.useContext(d);if(!S)throw new Error("MenuItem must be wrapped in <Menu/>");const{hide:h}=S,b=r.useCallback((function(e){null==i||i(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&a;null==f||f(l),t&&h()}),[c,i,f,a,h,l]);return r.createElement(o.MenuItem,t.objectSpread2(t.objectSpread2({},m),{},{store:S,ref:n,onClick:b,className:p,hideOnClick:!1}),u)})),b=r.forwardRef((function({children:e,onItemSelect:t},n){const{handleItemSelect:l,menuStore:u}=r.useContext(d);if(!u)throw new Error("SubMenu must be wrapped in <Menu/>");const{hide:c}=u,a=r.useCallback((function(e){null==t||t(e),null==l||l(e),c()}),[c,l,t]),[s,i]=r.Children.toArray(e);return r.createElement(p,{onItemSelect:a},r.createElement(o.MenuItem,{store:u,ref:n,hideOnClick:!1,render:s},s.props.children),i)})),M=r.forwardRef((function(e,n){let{label:l,children:u,exceptionallySetClassName:c}=e,a=t.objectWithoutProperties(e,i);const{menuStore:s}=r.useContext(d);if(!s)throw new Error("MenuGroup must be wrapped in <Menu/>");return r.createElement(o.MenuGroup,t.objectSpread2(t.objectSpread2({},a),{},{ref:n,store:s,className:c}),l?r.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,u)}));exports.ContextMenuTrigger=f,exports.Menu=p,exports.MenuButton=m,exports.MenuGroup=M,exports.MenuItem=h,exports.MenuList=S,exports.SubMenu=b;
 //# sourceMappingURL=menu.js.map