@doist/reactist 25.0.0-beta → 25.0.0-beta.2

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/loading/loading.d.ts

@@ -1,17 +1,16 @@
 import * as React from 'react';
+import type { ObfuscatedClassName } from '../utils/common-types';
 declare type Size = 'xsmall' | 'small' | 'medium' | 'large';
 declare type NativeProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'role' | 'size'>;
-declare type LoadingProps = NativeProps & {
+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    React.HTMLAttributes<HTMLDivElement>,\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,7 +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 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.
@@ -15,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.
@@ -81,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
@@ -110,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<React.HTMLAttributes<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

package/lib/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n} from '@ariakit/react'\n\nimport './menu.less'\n\ntype MenuContextState = {\n    menuStore: MenuStore\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<MenuStoreProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n\n    const handleContextMenu = React.useCallback(\n        function handleContextMenu(event: React.MouseEvent) {\n            event.preventDefault()\n            setAnchorRect({ x: event.clientX, y: event.clientY })\n            menuStore.show()\n        },\n        [setAnchorRect, menuStore],\n    )\n\n    const isOpen = menuStore.useState('open')\n    React.useEffect(() => {\n        if (!isOpen) setAnchorRect(null)\n    }, [isOpen, setAnchorRect])\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<AriakitMenuProps, 'store' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide } = menuStore\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            as={as}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = menuStore\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem as=\"div\" store={menuStore} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","setAnchorRect","getAnchorRect","menuStore","useMenuStore","focusLoop","value","handleItemSelect","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    Portal,\n    MenuStore,\n    MenuStoreProps,\n    useMenuStore,\n    MenuProps as AriakitMenuProps,\n    Menu as AriakitMenu,\n    MenuGroup as AriakitMenuGroup,\n    MenuItem as AriakitMenuItem,\n    MenuItemProps as AriakitMenuItemProps,\n    MenuButton as AriakitMenuButton,\n    MenuButtonProps as AriakitMenuButtonProps,\n    Role,\n    RoleProps,\n} from '@ariakit/react'\n\nimport './menu.less'\nimport type { ObfuscatedClassName } from '../utils/common-types'\n\ntype MenuContextState = {\n    menuStore: MenuStore | null\n    handleItemSelect?: (value: string | null | undefined) => void\n    getAnchorRect: (() => { x: number; y: number }) | null\n    setAnchorRect: (rect: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>({\n    menuStore: null,\n    handleItemSelect: () => undefined,\n    getAnchorRect: null,\n    setAnchorRect: () => undefined,\n})\n\n//\n// Menu\n//\n\ninterface MenuProps extends Omit<MenuStoreProps, 'visible'> {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, setAnchorRect] = React.useState<{ x: number; y: number } | null>(null)\n    const getAnchorRect = React.useMemo(() => (anchorRect ? () => anchorRect : null), [anchorRect])\n    const menuStore = useMenuStore({ focusLoop: true, ...props })\n\n    const value: MenuContextState = React.useMemo(\n        () => ({ menuStore, handleItemSelect: onItemSelect, getAnchorRect, setAnchorRect }),\n        [menuStore, onItemSelect, getAnchorRect, setAnchorRect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ninterface MenuButtonProps\n    extends Omit<AriakitMenuButtonProps, 'store' | 'className' | 'as'>,\n        ObfuscatedClassName {}\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuButton must be wrapped in <Menu/>')\n    }\n    return (\n        <AriakitMenuButton\n            {...props}\n            store={menuStore}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\n\ninterface ContextMenuTriggerProps\n    extends ObfuscatedClassName,\n        React.HTMLAttributes<HTMLDivElement>,\n        Pick<RoleProps, 'render'> {}\n\nconst ContextMenuTrigger = React.forwardRef<HTMLDivElement, ContextMenuTriggerProps>(\n    function ContextMenuTrigger({ render, ...props }, ref) {\n        const { setAnchorRect, menuStore } = React.useContext(MenuContext)\n        if (!menuStore) {\n            throw new Error('ContextMenuTrigger must be wrapped in <Menu/>')\n        }\n\n        const handleContextMenu = React.useCallback(\n            function handleContextMenu(event: React.MouseEvent) {\n                event.preventDefault()\n                setAnchorRect({ x: event.clientX, y: event.clientY })\n                menuStore.show()\n            },\n            [setAnchorRect, menuStore],\n        )\n\n        const isOpen = menuStore.useState('open')\n        React.useEffect(() => {\n            if (!isOpen) setAnchorRect(null)\n        }, [isOpen, setAnchorRect])\n\n        return <Role.div {...props} onContextMenu={handleContextMenu} ref={ref} render={render} />\n    },\n)\n\n//\n// MenuList\n//\n\ninterface MenuListProps\n    extends Omit<AriakitMenuProps, 'store' | 'className'>,\n        ObfuscatedClassName {}\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = React.forwardRef<HTMLDivElement, MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { menuStore, getAnchorRect } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuList must be wrapped in <Menu/>')\n    }\n\n    const isOpen = menuStore.useState('open')\n\n    return isOpen ? (\n        <Portal preserveTabOrder>\n            <AriakitMenu\n                {...props}\n                store={menuStore}\n                gutter={8}\n                shift={4}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                getAnchorRect={getAnchorRect ?? undefined}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ninterface MenuItemProps extends AriakitMenuItemProps, ObfuscatedClassName {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuItem must be wrapped in <Menu/>')\n    }\n\n    const { hide } = menuStore\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect?.(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <AriakitMenuItem\n            {...props}\n            store={menuStore}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </AriakitMenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('SubMenu must be wrapped in <Menu/>')\n    }\n\n    const { hide: parentMenuHide } = menuStore\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            onItemSelect?.(value)\n            parentMenuItemSelect?.(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n    const buttonElement = button as React.ReactElement<MenuButtonProps>\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <AriakitMenuItem store={menuStore} ref={ref} hideOnClick={false} render={buttonElement}>\n                {buttonElement.props.children}\n            </AriakitMenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ninterface MenuGroupProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>,\n        ObfuscatedClassName {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { menuStore } = React.useContext(MenuContext)\n    if (!menuStore) {\n        throw new Error('MenuGroup must be wrapped in <Menu/>')\n    }\n\n    return (\n        <AriakitMenuGroup\n            {...props}\n            ref={ref}\n            store={menuStore}\n            className={exceptionallySetClassName}\n        >\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </AriakitMenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","menuStore","handleItemSelect","getAnchorRect","setAnchorRect","Menu","children","onItemSelect","props","anchorRect","useMenuStore","focusLoop","value","Provider","MenuButton","ref","exceptionallySetClassName","Error","AriakitMenuButton","store","className","classNames","ContextMenuTrigger","render","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","isOpen","useState","Role","div","onContextMenu","MenuList","modal","Portal","preserveTabOrder","AriakitMenu","gutter","shift","undefined","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","AriakitMenuItem","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","MenuGroup","label","AriakitMenuGroup","role"],"mappings":"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"}