@doist/reactist 13.0.0 → 14.1.1

package/es/components/color-picker/color-picker.js

@@ -59,6 +59,7 @@ function ColorItem({
   tooltip
 }) {
   const item = /*#__PURE__*/React__default.createElement("span", {
+    "data-testid": "reactist-color-item",
     className: 'reactist color_item' + (isActive ? ' active' : ''),
     style: {
       backgroundColor: color

package/es/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","_getColor","colorList","colorIndex","index","length","ColorPicker","small","onChange","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","displayName","item","Tooltip","content"],"mappings":";;;;;MAUMA,MAAM,GAAG,CACX,SADW,EAEX,SAFW,EAGX,SAHW,EAIX,SAJW,EAKX,SALW,EAMX,SANW,EAOX,SAPW,EAQX,SARW,EASX,SATW,EAUX,SAVW,EAWX,SAXW,EAYX,SAZW,EAaX,SAbW;;AAgBf,MAAMC,aAAa,GAAIC,KAAD,IAClB,OAAOA,KAAP,KAAiB,QADrB;;AAGA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAqCC,UAArC;EACd,MAAMC,KAAK,GAAGD,UAAU,IAAID,SAAS,CAACG,MAAxB,GAAiC,CAAjC,GAAqCF,UAAnD;EACA,OAAOD,SAAS,CAACE,KAAD,CAAhB;AACH,CAHD;;AAYA,SAASE,WAAT,CAAqB;EAAEN,KAAK,GAAG,CAAV;EAAaO,KAAb;EAAoBC,QAApB;EAA8BN,SAAS,GAAGJ;AAA1C,CAArB;EACI,oBACIW,4BAAA,CAACC,kBAAkB,CAACC,GAApB;IAAwBC,KAAK;IAACC,SAAS,EAAC;GAAxC,eACIJ,4BAAA,CAACC,kBAAkB,CAACI,OAApB,MAAA,EACK,CAAC;IACE,MAAMC,eAAe,GAAGd,SAAS,CAACC,SAAD,EAAYF,KAAZ,CAAjC;;IAEA,oBACIS,4BAAA,OAAA;MACII,SAAS,EAAEG,UAAU,CAAC,eAAD,EAAkB;QAAET;OAApB;MACrBU,KAAK,EAAE;QACHF,eAAe,EAAEhB,aAAa,CAACgB,eAAD,CAAb,GACXA,eAAe,CAACf,KADL,GAEXe;;KALd,eAQIN,4BAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,CARJ,CADJ;GAHH,GADL,CADJ,eAmBIJ,4BAAA,CAACC,kBAAkB,CAACQ,IAApB,MAAA,eACIT,4BAAA,MAAA;IAAKI,SAAS,EAAC;GAAf,EACKX,SAAS,CAACiB,MAAV,CAAoC,CAACC,KAAD,EAAQC,YAAR,EAAsBC,YAAtB;IACjCF,KAAK,CAACG,IAAN,eACId,4BAAA,CAACe,SAAD;MACIC,QAAQ,EACJzB,KAAK,IAAIE,SAAS,CAACG,MAAnB,GACMiB,YAAY,KAAK,CADvB,GAEMA,YAAY,KAAKtB;MAE3B0B,GAAG,EAAEJ;MACLtB,KAAK,EACDD,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACrB,KAA3C,GAAmDqB;MAEvDlB,UAAU,EAAEmB;MACZK,OAAO,EAAEnB;MACToB,OAAO,EAAE7B,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACQ,IAA3C,GAAkD;KAZ/D,CADJ;IAgBA,OAAOT,KAAP;GAjBH,EAkBE,EAlBF,CADL,CADJ,CAnBJ,CADJ;AA6CH;;AACDd,WAAW,CAACwB,WAAZ,GAA0B,aAA1B;;AAUA,SAASN,SAAT,CAAmB;EAAExB,KAAF;EAASG,UAAT;EAAqBsB,QAArB;EAA+BE,OAA/B;EAAwCC;AAAxC,CAAnB;EACI,MAAMG,IAAI,gBACNtB,4BAAA,OAAA;IACII,SAAS,EAAE,yBAAyBY,QAAQ,GAAG,SAAH,GAAe,EAAhD;IACXR,KAAK,EAAE;MAAEF,eAAe,EAAEf;;IAC1B2B,OAAO,EAAE,MAAMA,OAAN,oBAAMA,OAAO,CAAGxB,UAAH;GAH1B,eAKIM,4BAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,CALJ,CADJ;EAUA,OAAOe,OAAO,gBAAGnB,4BAAA,CAACuB,OAAD;IAASC,OAAO,EAAEL;GAAlB,EAA4BG,IAA5B,CAAH,GAAiDA,IAA/D;AACH;;AACDP,SAAS,CAACM,WAAV,GAAwB,WAAxB;;;;"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","_getColor","colorList","colorIndex","index","length","ColorPicker","small","onChange","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","displayName","item","Tooltip","content"],"mappings":";;;;;MAUMA,MAAM,GAAG,CACX,SADW,EAEX,SAFW,EAGX,SAHW,EAIX,SAJW,EAKX,SALW,EAMX,SANW,EAOX,SAPW,EAQX,SARW,EASX,SATW,EAUX,SAVW,EAWX,SAXW,EAYX,SAZW,EAaX,SAbW;;AAgBf,MAAMC,aAAa,GAAIC,KAAD,IAClB,OAAOA,KAAP,KAAiB,QADrB;;AAGA,MAAMC,SAAS,GAAG,CAACC,SAAD,EAAqCC,UAArC;EACd,MAAMC,KAAK,GAAGD,UAAU,IAAID,SAAS,CAACG,MAAxB,GAAiC,CAAjC,GAAqCF,UAAnD;EACA,OAAOD,SAAS,CAACE,KAAD,CAAhB;AACH,CAHD;;AAYA,SAASE,WAAT,CAAqB;EAAEN,KAAK,GAAG,CAAV;EAAaO,KAAb;EAAoBC,QAApB;EAA8BN,SAAS,GAAGJ;AAA1C,CAArB;EACI,oBACIW,4BAAA,CAACC,kBAAkB,CAACC,GAApB;IAAwBC,KAAK;IAACC,SAAS,EAAC;GAAxC,eACIJ,4BAAA,CAACC,kBAAkB,CAACI,OAApB,MAAA,EACK,CAAC;IACE,MAAMC,eAAe,GAAGd,SAAS,CAACC,SAAD,EAAYF,KAAZ,CAAjC;;IAEA,oBACIS,4BAAA,OAAA;MACII,SAAS,EAAEG,UAAU,CAAC,eAAD,EAAkB;QAAET;OAApB;MACrBU,KAAK,EAAE;QACHF,eAAe,EAAEhB,aAAa,CAACgB,eAAD,CAAb,GACXA,eAAe,CAACf,KADL,GAEXe;;KALd,eAQIN,4BAAA,OAAA;MAAMI,SAAS,EAAC;KAAhB,CARJ,CADJ;GAHH,GADL,CADJ,eAmBIJ,4BAAA,CAACC,kBAAkB,CAACQ,IAApB,MAAA,eACIT,4BAAA,MAAA;IAAKI,SAAS,EAAC;GAAf,EACKX,SAAS,CAACiB,MAAV,CAAoC,CAACC,KAAD,EAAQC,YAAR,EAAsBC,YAAtB;IACjCF,KAAK,CAACG,IAAN,eACId,4BAAA,CAACe,SAAD;MACIC,QAAQ,EACJzB,KAAK,IAAIE,SAAS,CAACG,MAAnB,GACMiB,YAAY,KAAK,CADvB,GAEMA,YAAY,KAAKtB;MAE3B0B,GAAG,EAAEJ;MACLtB,KAAK,EACDD,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACrB,KAA3C,GAAmDqB;MAEvDlB,UAAU,EAAEmB;MACZK,OAAO,EAAEnB;MACToB,OAAO,EAAE7B,aAAa,CAACsB,YAAD,CAAb,GAA8BA,YAAY,CAACQ,IAA3C,GAAkD;KAZ/D,CADJ;IAgBA,OAAOT,KAAP;GAjBH,EAkBE,EAlBF,CADL,CADJ,CAnBJ,CADJ;AA6CH;;AACDd,WAAW,CAACwB,WAAZ,GAA0B,aAA1B;;AAUA,SAASN,SAAT,CAAmB;EAAExB,KAAF;EAASG,UAAT;EAAqBsB,QAArB;EAA+BE,OAA/B;EAAwCC;AAAxC,CAAnB;EACI,MAAMG,IAAI,gBACNtB,4BAAA,OAAA;mBACgB;IACZI,SAAS,EAAE,yBAAyBY,QAAQ,GAAG,SAAH,GAAe,EAAhD;IACXR,KAAK,EAAE;MAAEF,eAAe,EAAEf;;IAC1B2B,OAAO,EAAE,MAAMA,OAAN,oBAAMA,OAAO,CAAGxB,UAAH;GAJ1B,eAMIM,4BAAA,OAAA;IAAMI,SAAS,EAAC;GAAhB,CANJ,CADJ;EAWA,OAAOe,OAAO,gBAAGnB,4BAAA,CAACuB,OAAD;IAASC,OAAO,EAAEL;GAAlB,EAA4BG,IAA5B,CAAH,GAAiDA,IAA/D;AACH;;AACDP,SAAS,CAACM,WAAV,GAAwB,WAAxB;;;;"}

package/es/components/deprecated-dropdown/dropdown.js

@@ -141,7 +141,8 @@ class Box extends React__default.Component {
       style: {
         display: 'inline-block'
       },
-      className: className
+      className: className,
+      "data-testid": "reactist-dropdown-box"
     }, top && this._getBodyComponent(), this._getTriggerComponent(), !top && this._getBodyComponent());
   }
 
@@ -199,7 +200,8 @@ function Body({
     ref: setPosition,
     style: style,
     className: "body",
-    id: "reactist-dropdown-body"
+    id: "reactist-dropdown-body",
+    "data-testid": "reactist-dropdown-body"
   }, children);
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import 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 style={{ display: 'inline-block' }} className={className}>\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'> & {\n    tooltip?: React.ReactNode\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 ref={setPosition} style={style} className=\"body\" id=\"reactist-dropdown-body\">\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","Component","constructor","props","context","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onShowBody","document","addEventListener","onHideBody","removeEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","dropdownTriggerHeight","clientHeight","dropdownBodyHeight","scrollingParentHeight","scrollingParentOffset","scrollTop","bottomOffset","top","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","handleClick","preventDefault","stopPropagation","Button","Body","left","id","Dropdown"],"mappings":";;;;;;;;AA2BA,MAAMA,GAAN,SAAkBC,cAAK,CAACC,SAAxB;EAGIC,YAAYC,OAAiBC;IACzB,MAAMD,KAAN,EAAaC,OAAb;SAeJC;;SAEAC,sBAAuBC,KAAD;MAClB,MAAMC,eAAe,GAAGC,QAAQ,CAACC,WAAT,CAAqB,IAArB,CAAxB;MAEA,IAAIF,eAAe,IAAI,CAACA,eAAe,CAACG,QAAhB,CAAyBJ,KAAK,CAACK,MAA/B,CAAxB,EACI,KAAKC,eAAL,GADJ,KAEK,IAAI,CAAC,KAAKV,KAAL,CAAWW,qBAAhB,EAAuC;;QAExC,KAAKT,QAAL,GAAgBU,UAAU,CAAC;UACvB,IAAI,KAAKC,KAAL,CAAWC,QAAf,EAAyB;YACrB,KAAKJ,eAAL;;SAFkB,EAIvB,GAJuB,CAA1B;;;;SAQRA,kBAAkB;MACd,IAAI,CAAC,KAAKG,KAAL,CAAWC,QAAhB,EAA0B;;QAEtB,IAAI,KAAKd,KAAL,CAAWe,UAAf,EAA2B,KAAKf,KAAL,CAAWe,UAAX;QAC3BC,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmC,KAAKd,mBAAxC,EAA6D,IAA7D;OAHJ,MAIO;;QAEH,IAAI,KAAKH,KAAL,CAAWkB,UAAf,EAA2B,KAAKlB,KAAL,CAAWkB,UAAX;QAC3BF,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsC,KAAKhB,mBAA3C,EAAgE,IAAhE;;;MAGJ,KAAKiB,QAAL,CAAc;QACVN,QAAQ,EAAE,CAAC,KAAKD,KAAL,CAAWC;OAD1B;;;SAaJO,eAAgBC,IAAD;MACX,IAAIA,IAAJ,EAAU;QACN,MAAMC,eAAe,GAAGP,QAAQ,CAACQ,cAAT,CACpB,KAAKxB,KAAL,CAAWyB,gBAAX,GAA8B,KAAKzB,KAAL,CAAWyB,gBAAzC,GAA4D,EADxC,CAAxB;;QAIA,IAAIF,eAAJ,EAAqB;UACjB,MAAMG,QAAQ,GAAGpB,QAAQ,CAACC,WAAT,CAAqB,IAArB,CAAjB;;UACA,IAAI,CAACmB,QAAL,EAAe;YACX;;;UAEJ,MAAMC,wBAAwB,GAAIrB,QAAQ,CAACC,WAAT,CAAqB,IAArB,EAC7BqB,SADL;UAEA,MAAMC,eAAe,GAAIH,QAAoB,CAACI,aAArB,CAAmC,UAAnC,CAAzB;;UACA,IAAI,CAACD,eAAL,EAAsB;YAClB;;;UAEJ,MAAME,qBAAqB,GAAGF,eAAe,CAACG,YAA9C;UACA,MAAMC,kBAAkB,GAAGX,IAAI,CAACU,YAAhC;UAEA,MAAME,qBAAqB,GAAGX,eAAe,CAACS,YAA9C;UACA,MAAMG,qBAAqB,GAAGZ,eAAe,CAACa,SAA9C;UAEA,MAAMC,YAAY,GACdH,qBAAqB,GACrBC,qBADA,GAEAR,wBAFA,GAGAI,qBAJJ;UAMA,MAAMO,GAAG,GAAGD,YAAY,GAAGJ,kBAA3B;;UAEA,IAAIK,GAAG,KAAK,KAAKzB,KAAL,CAAWyB,GAAvB,EAA4B;YACxB,KAAKlB,QAAL,CAAc;cAAEkB;aAAhB;;;;;;IAvFZ,KAAKzB,KAAL,GAAa;MACTC,QAAQ,EAAE,KADD;MAETwB,GAAG,EAAEtC,KAAK,CAACsC,GAAN,IAAa;KAFtB;IAKA,KAAKpC,QAAL,GAAgBqC,SAAhB;;;EAGJC,oBAAoB;IAChBxB,QAAQ,CAACG,mBAAT,CAA6B,OAA7B,EAAsC,KAAKhB,mBAA3C,EAAgE,IAAhE;;IACA,IAAI,KAAKD,QAAT,EAAmB;MACfuC,YAAY,CAAC,KAAKvC,QAAN,CAAZ;;;;EAoCRwC,oBAAoB;;;IAChB,MAAMC,QAAQ,2BAAG,KAAK3C,KAAL,CAAW4C,QAAd,qBAAG,qBAAsB,CAAtB,CAAjB;;IACA,OAAOD,QAAQ,gBACT9C,cAAK,CAACgD,YAAN,CAAmBF,QAAnB,EAA6B;MAAEG,OAAO,EAAE,KAAKpC;KAA7C,CADS,GAET6B,SAFN;;;;EA4CJQ,iBAAiB;IACb,IAAI,CAAC,KAAKlC,KAAL,CAAWC,QAAhB,EAA0B;MACtB,OAAO,IAAP;;;IAEJ,MAAM;MAAEwB;QAAQ,KAAKzB,KAArB;IACA,MAAM;MAAEmC,KAAK,GAAG,KAAV;MAAiBJ;QAAa,KAAK5C,KAAzC;IACA,MAAMA,KAAK,GAAG;MAAEsC,GAAF;MAAOU,KAAP;MAAcC,WAAW,EAAE,KAAK5B;KAA9C;IAEA,MAAM6B,SAAS,GAAGC,UAAU,CAAC;MACzBC,YAAY,EAAE,IADW;MAEzBC,UAAU,EAAE,IAFa;MAGzBf,GAAG,EAAEA,GAHoB;MAIzBgB,MAAM,EAAE,CAAChB;KAJe,CAA5B;IAOA,MAAMhB,IAAI,GAAGsB,QAAH,oBAAGA,QAAQ,CAAG,CAAH,CAArB;IAEA,MAAMW,aAAa,GACf,OAAOjC,IAAP,KAAgB,UAAhB,GACMA,IAAI,CAACtB,KAAD,CADV,GAEMsB,IAAI,gBACJzB,cAAK,CAACgD,YAAN,CAAmBvB,IAAnB,EAAyBtB,KAAzB,CADI,GAEJuC,SALV;IAMA,oBACI1C,4BAAA,MAAA;MAAKqD,SAAS,EAAEA;MAAWM,KAAK,EAAE;QAAEC,QAAQ,EAAE;;KAA9C,EACKF,aADL,CADJ;;;EAOJG,MAAM;IACF,MAAMR,SAAS,GAAGC,UAAU,CAAC,mBAAD,EAAsB,KAAKnD,KAAL,CAAWkD,SAAjC,CAA5B;IACA,MAAM;MAAEZ;QAAQ,KAAKzB,KAArB;IAEA,oBACIhB,4BAAA,MAAA;MAAK2D,KAAK,EAAE;QAAEG,OAAO,EAAE;;MAAkBT,SAAS,EAAEA;KAApD,EACKZ,GAAG,IAAI,KAAKS,iBAAL,EADZ,EAEK,KAAKL,oBAAL,EAFL,EAGK,CAACJ,GAAD,IAAQ,KAAKS,iBAAL,EAHb,CADJ;;;;;AApIFnD,IACYgE;AA6IlBhE,GAAG,CAACgE,WAAJ,GAAkB,cAAlB;AAWA,MAAMC,OAAO,gBAAGhE,cAAK,CAACiE,UAAN,CAAkD,SAASD,OAAT,OAE9DE,GAF8D;MAC9D;IAAEnB,QAAF;IAAYE,OAAZ;IAAqBkB,OAArB;IAA8Bd;;MAAclD;;EAG5C,SAASiE,WAAT,CAAqB7D,KAArB;IACIA,KAAK,CAAC8D,cAAN;IACA9D,KAAK,CAAC+D,eAAN;IACA,IAAIrB,OAAJ,EAAaA,OAAO,CAAC1C,KAAD,CAAP;;;EAGjB,oBACIP,4BAAA,CAACuE,MAAD,oCACQpE,KADR;IAEIkD,SAAS,EAAEC,UAAU,CAAC,SAAD,EAAYD,SAAZ,CAFzB;IAGIJ,OAAO,EAAEmB,WAHb;IAIID,OAAO,EAAEA,OAJb;IAKID,GAAG,EAAEA;MAEJnB,QAPL,CADJ;AAWH,CArBe,CAAhB;AAuBAiB,OAAO,CAACD,WAAR,GAAsB,kBAAtB;;AASA,SAASS,IAAT,CAAc;EAAE/B,GAAF;EAAOU,KAAP;EAAcJ,QAAd;EAAwBK;AAAxB,CAAd;EACI,MAAMO,KAAK,GAAwB;IAAEC,QAAQ,EAAE,UAAZ;IAAwBT,KAAK,EAAE,CAA/B;IAAkCV,GAAG,EAAE;GAA1E;;EAEA,IAAIA,GAAJ,EAAS;IACLkB,KAAK,CAAClB,GAAN,GAAY,MAAZ;IACAkB,KAAK,CAACF,MAAN,GAAe,CAAf;;;EAGJ,IAAIN,KAAJ,EAAW;IACPQ,KAAK,CAACR,KAAN,GAAc,MAAd;IACAQ,KAAK,CAACc,IAAN,GAAa,CAAb;;;EAGJ,oBACIzE,4BAAA,MAAA;IAAKkE,GAAG,EAAEd;IAAaO,KAAK,EAAEA;IAAON,SAAS,EAAC;IAAOqB,EAAE,EAAC;GAAzD,EACK3B,QADL,CADJ;AAKH;;AAEDyB,IAAI,CAACT,WAAL,GAAmB,eAAnB;MAEMY,QAAQ,GAAG;EACb5E,GADa;EAEbiE,OAFa;EAGbQ;AAHa;;;;"}
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import 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","Component","constructor","props","context","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onShowBody","document","addEventListener","onHideBody","removeEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","dropdownTriggerHeight","clientHeight","dropdownBodyHeight","scrollingParentHeight","scrollingParentOffset","scrollTop","bottomOffset","top","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","handleClick","preventDefault","stopPropagation","Button","Body","left","id","Dropdown"],"mappings":"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"}

package/es/components/tooltip/tooltip.js

@@ -33,9 +33,13 @@ function Tooltip(_ref) {
   });
   const child = React__default.Children.only(children);
 
-  if (!content) {
+  if (!content || !child) {
     return child;
   }
+
+  if (typeof child.ref === 'string') {
+    throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded');
+  }
   /**
    * Prevents the tooltip from automatically firing on focus all the time. This is to prevent
    * tooltips from showing when the trigger element is focused back after a popover or dialog that
@@ -67,13 +71,15 @@ function Tooltip(_ref) {
     child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.onFocus == null ? void 0 : _child$props.onFocus(event);
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, _objectSpread2(_objectSpread2({
-    state: state
-  }, child.props), {}, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipAnchor, {
+    state: state,
     ref: child.ref,
     onFocus: handleFocus
-  }), anchorProps => {
-    return /*#__PURE__*/React__default.cloneElement(child, anchorProps);
+  }, anchorProps => {
+    // Let child props override anchor props so user can specify attributes like tabIndex
+    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems
+    // by applying the replacement component/element twice
+    return /*#__PURE__*/React__default.cloneElement(child, _objectSpread2(_objectSpread2({}, anchorProps), child.props));
   }), state.visible ? /*#__PURE__*/React__default.createElement(Tooltip$1, _objectSpread2(_objectSpread2({}, props), {}, {
     state: state,
     className: classNames('reactist_tooltip', className)

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div'] | null>,\n    )\n    if (!content) {\n        return child\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} {...child.props} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    return React.cloneElement(child, anchorProps)\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","ref","anchorProps","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n    useTooltipState as useAriakitTooltipState,\n    TooltipStateProps as AriakitTooltipStateProps,\n    Tooltip as AriakitTooltip,\n    TooltipProps as AriakitTooltipProps,\n    TooltipAnchor,\n    TooltipAnchorProps,\n} from 'ariakit/tooltip'\nimport type { PopoverState } from 'ariakit/popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {\n    children: React.ReactNode\n    content: React.ReactNode | (() => React.ReactNode)\n    position?: PopoverState['placement']\n    gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: AriakitTooltipStateProps) {\n    const tooltipState = useAriakitTooltipState(initialState)\n    const delay = useDelay()\n    return React.useMemo(\n        () => ({\n            ...tooltipState,\n            show: delay(() => tooltipState.show(), SHOW_DELAY),\n            hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n        }),\n        [delay, tooltipState],\n    )\n}\n\nfunction Tooltip({\n    children,\n    content,\n    position = 'top',\n    gapSize = 3,\n    className,\n    ...props\n}: TooltipProps) {\n    const state = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n    const child = React.Children.only(\n        children as React.FunctionComponentElement<JSX.IntrinsicElements['div']> | null,\n    )\n\n    if (!content || !child) {\n        return child\n    }\n\n    if (typeof child.ref === 'string') {\n        throw new Error('Tooltip: String refs cannot be used as they cannot be forwarded')\n    }\n\n    /**\n     * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n     * tooltips from showing when the trigger element is focused back after a popover or dialog that\n     * it opened was closed. See link below for more details.\n     * @see https://github.com/reakit/reakit/discussions/749\n     */\n    function handleFocus(event: React.FocusEvent<HTMLDivElement>) {\n        // If focus is not followed by a key up event, does it mean that it's not\n        // an intentional keyboard focus? Not sure but it seems to work.\n        // This may be resolved soon in an upcoming version of reakit:\n        // https://github.com/reakit/reakit/issues/750\n        function handleKeyUp(e: Event) {\n            const eventKey = (e as KeyboardEvent).key\n            if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n                state.show()\n            }\n        }\n        event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n        // Prevent tooltip.show from being called by TooltipReference\n        event.preventDefault()\n        child?.props?.onFocus?.(event)\n    }\n\n    return (\n        <>\n            <TooltipAnchor state={state} ref={child.ref} onFocus={handleFocus}>\n                {(anchorProps: TooltipAnchorProps) => {\n                    // Let child props override anchor props so user can specify attributes like tabIndex\n                    // Also, do not apply the child's props to TooltipAnchor as props like `as` can create problems\n                    // by applying the replacement component/element twice\n                    return React.cloneElement(child, { ...anchorProps, ...child.props })\n                }}\n            </TooltipAnchor>\n            {state.visible ? (\n                <AriakitTooltip\n                    {...props}\n                    state={state}\n                    className={classNames('reactist_tooltip', className)}\n                >\n                    {typeof content === 'function' ? content() : content}\n                </AriakitTooltip>\n            ) : null}\n        </>\n    )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n    const clearTimeouts = React.useCallback(function clearTimeouts() {\n        if (timeoutRef.current != null) {\n            clearTimeout(timeoutRef.current)\n        }\n    }, [])\n\n    // Runs clearTimeouts when the component is unmounted\n    React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n    return React.useCallback(\n        function delay(fn: () => void, delay: number) {\n            return () => {\n                clearTimeouts()\n                timeoutRef.current = setTimeout(fn, delay)\n            }\n        },\n        [clearTimeouts],\n    )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useAriakitTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","state","placement","gutter","child","Children","only","ref","Error","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipAnchor","anchorProps","cloneElement","visible","AriakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}

package/es/new-components/tabs/tabs.js

@@ -2,6 +2,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { useEffect, useMemo, createElement, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
 import { polymorphicComponent } from '../../utils/polymorphism.js';
+import { Box } from '../box/box.js';
 import { Inline } from '../inline/inline.js';
 import { useTabState, Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1 } from 'ariakit/tab';
 import { usePrevious } from '../../hooks/use-previous/use-previous.js';
@@ -19,8 +20,7 @@ function Tabs({
   children,
   selectedId,
   defaultSelectedId,
-  color = 'primary',
-  variant = 'normal',
+  variant = 'neutral',
   onSelectedIdChange
 }) {
   const tabState = useTabState({
@@ -40,10 +40,9 @@ function Tabs({
   const memoizedTabState = useMemo(function memoizeTabState() {
     return {
       tabState,
-      color,
       variant
     };
-  }, [color, variant, tabState]);
+  }, [variant, tabState]);
   return /*#__PURE__*/createElement(TabsContext.Provider, {
     value: memoizedTabState
   }, children);
@@ -68,13 +67,12 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
   }
 
   const {
-    color,
     variant,
     tabState
   } = tabContextValue;
   return /*#__PURE__*/createElement(Tab$1, _objectSpread2(_objectSpread2({}, props), {}, {
     as: as,
-    className: classNames(exceptionallySetClassName, styles.tab, styles["tab-" + (variant != null ? variant : '')], styles["tab-" + (color != null ? color : '')]),
+    className: classNames(exceptionallySetClassName, styles.tab, styles["tab-" + variant]),
     id: id,
     state: tabState,
     ref: ref
@@ -87,7 +85,7 @@ const Tab = /*#__PURE__*/polymorphicComponent(function Tab(_ref, ref) {
 function TabList(_ref2) {
   let {
     children,
-    space = 'medium'
+    space = 'xsmall'
   } = _ref2,
       props = _objectWithoutProperties(_ref2, _excluded2);
 
@@ -98,13 +96,24 @@ function TabList(_ref2) {
   }
 
   const {
-    tabState
+    tabState,
+    variant
   } = tabContextValue;
-  return /*#__PURE__*/createElement(TabList$1, _objectSpread2({
-    state: tabState
-  }, props), /*#__PURE__*/createElement(Inline, {
-    space: space
-  }, children));
+  return (
+    /*#__PURE__*/
+    // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container
+    // which will render the track with the wrong height
+    createElement(Box, null, /*#__PURE__*/createElement(TabList$1, _objectSpread2({
+      state: tabState,
+      as: Box,
+      position: "relative",
+      width: "maxContent"
+    }, props), /*#__PURE__*/createElement(Box, {
+      className: classNames(styles.track, styles["track-" + space], styles["track-" + variant])
+    }), /*#__PURE__*/createElement(Inline, {
+      space: space
+    }, children)))
+  );
 }
 /**
  * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.
@@ -135,13 +144,14 @@ const TabPanel = /*#__PURE__*/polymorphicComponent(function TabPanel(_ref3, ref)
   const {
     tabState
   } = tabContextValue;
-  return /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({
+  const shouldRender = render === 'always' || render === 'active' && tabIsActive || render === 'lazy' && (tabIsActive || tabRendered);
+  return shouldRender ? /*#__PURE__*/createElement(TabPanel$1, _objectSpread2(_objectSpread2({
     tabId: id
   }, props), {}, {
     state: tabState,
     as: as,
     ref: ref
-  }), render === 'always' ? children : null, render === 'active' && tabIsActive ? children : null, render === 'lazy' && (tabIsActive || tabRendered) ? children : null);
+  }), children) : null;
 });
 /**
  * Allows content to be rendered based on the current tab being selected while outside of the TabPanel

package/es/new-components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { ResponsiveProp } from '../responsive-props'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Pick<TabsProps, 'color' | 'variant'>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the primary colour of the tabs\n     */\n    color?: 'primary' | 'secondary' | 'tertiary'\n    /**\n     * Determines the style of the tabs\n     */\n    variant?: 'normal' | 'plain'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    color = 'primary',\n    variant = 'normal',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                color,\n                variant,\n            }\n        },\n        [color, variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { color, variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(\n                exceptionallySetClassName,\n                styles.tab,\n                styles[`tab-${variant ?? ''}`],\n                styles[`tab-${color ?? ''}`],\n            )}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: ResponsiveProp<Space>\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'medium',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState } = tabContextValue\n\n    return (\n        <BaseTabList state={tabState} {...props}>\n            <Inline space={space}>{children}</Inline>\n        </BaseTabList>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { tabState } = tabContextValue\n\n        return (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {render === 'always' ? children : null}\n                {render === 'active' && tabIsActive ? children : null}\n                {render === 'lazy' && (tabIsActive || tabRendered) ? children : null}\n            </BaseTabPanel>\n        )\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","color","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","BaseTabList","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}
+{"version":3,"file":"tabs.js","sources":["../../../src/new-components/tabs/tabs.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport {\n    useTabState,\n    Tab as BaseTab,\n    TabList as BaseTabList,\n    TabPanel as BaseTabPanel,\n    TabState,\n} from 'ariakit/tab'\nimport { Inline } from '../inline'\nimport { usePrevious } from '../../hooks/use-previous'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport type { Space } from '../common-types'\n\nimport styles from './tabs.module.css'\nimport { Box } from '../box'\n\ntype TabsContextValue = {\n    tabState: TabState\n} & Required<Pick<TabsProps, 'variant'>>\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null)\n\ntype TabsProps = {\n    /** The `<Tabs>` component must be composed from a `<TabList>` and corresponding `<TabPanel>` components */\n    children: React.ReactNode\n    /**\n     * Determines the look and feel of the tabs.\n     */\n    variant?: 'themed' | 'neutral'\n    /**\n     * The id of the selected tab. Assigning a value makes this a\n     * controlled component\n     */\n    selectedId?: string | null\n    /**\n     * The tab to initially select. This can be used if the component should not\n     * be a controlled component but needs to have a tab selected\n     */\n    defaultSelectedId?: string | null\n    /**\n     * Called with the tab id when a tab is selected\n     */\n    onSelectedIdChange?: (selectedId: string | null | undefined) => void\n}\n\n/**\n * Used to group components that compose a set of tabs. There can only be one active tab within the same `<Tabs>` group.\n */\nexport function Tabs({\n    children,\n    selectedId,\n    defaultSelectedId,\n    variant = 'neutral',\n    onSelectedIdChange,\n}: TabsProps): React.ReactElement {\n    const tabState = useTabState({ selectedId, setSelectedId: onSelectedIdChange })\n    const previousDefaultSelectedId = usePrevious(defaultSelectedId)\n    const { selectedId: actualSelectedId, select } = tabState\n\n    React.useEffect(\n        function selectDefaultTab() {\n            if (\n                !selectedId &&\n                defaultSelectedId !== previousDefaultSelectedId &&\n                defaultSelectedId !== actualSelectedId &&\n                defaultSelectedId !== undefined\n            ) {\n                select(defaultSelectedId)\n            }\n        },\n        [selectedId, defaultSelectedId, actualSelectedId, select, previousDefaultSelectedId],\n    )\n\n    const memoizedTabState = React.useMemo(\n        function memoizeTabState() {\n            return {\n                tabState,\n                variant,\n            }\n        },\n        [variant, tabState],\n    )\n\n    return <TabsContext.Provider value={memoizedTabState}>{children}</TabsContext.Provider>\n}\n\ntype TabProps = {\n    /** The content to render inside of the tab button */\n    children: React.ReactNode\n\n    /** The tab's identifier. This must match its corresponding `<TabPanel>`'s id */\n    id: string\n}\n\n/**\n * Represents the individual tab elements within the group. Each `<Tab>` must have a corresponding `<TabPanel>` component.\n */\nexport const Tab = polymorphicComponent<'button', TabProps>(function Tab(\n    { as, children, id, exceptionallySetClassName, ...props },\n    ref,\n): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { variant, tabState } = tabContextValue\n\n    return (\n        <BaseTab\n            {...props}\n            as={as}\n            className={classNames(exceptionallySetClassName, styles.tab, styles[`tab-${variant}`])}\n            id={id}\n            state={tabState}\n            ref={ref}\n        >\n            {children}\n        </BaseTab>\n    )\n})\n\ntype TabListProps = (\n    | {\n          /** Labels the tab list for assistive technologies. This must be provided if `aria-labelledby` is omitted. */\n          'aria-label': string\n      }\n    | {\n          /**\n           * One or more element IDs used to label the tab list for assistive technologies. Required if\n           * `aria-label` is omitted.\n           */\n          'aria-labelledby': string\n      }\n    | {\n          /**\n           * For cases where multiple instances of the tab list exists, the duplicates may be marked as aria-hidden\n           */\n          'aria-hidden': boolean\n      }\n) & {\n    /**\n     * A list of `<Tab>` elements\n     */\n    children: React.ReactNode\n\n    /**\n     * Controls the spacing between tabs\n     */\n    space?: Space\n}\n\n/**\n * A component used to group `<Tab>` elements together.\n */\nexport function TabList({\n    children,\n    space = 'xsmall',\n    ...props\n}: TabListProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    if (!tabContextValue) {\n        return null\n    }\n\n    const { tabState, variant } = tabContextValue\n\n    return (\n        // The extra <Box> prevents <Inline>'s negative margins from collapsing when used in a flex container\n        // which will render the track with the wrong height\n        <Box>\n            <BaseTabList\n                state={tabState}\n                as={Box}\n                position=\"relative\"\n                width=\"maxContent\"\n                {...props}\n            >\n                <Box\n                    className={classNames(\n                        styles.track,\n                        styles[`track-${space}`],\n                        styles[`track-${variant}`],\n                    )}\n                />\n                <Inline space={space}>{children}</Inline>\n            </BaseTabList>\n        </Box>\n    )\n}\n\ntype TabPanelProps = {\n    /** The content to be rendered inside the tab */\n    children?: React.ReactNode\n\n    /** The tabPanel's identifier. This must match its corresponding `<Tab>`'s id */\n    id: string\n\n    /**\n     * By default, the tab panel's content is always rendered even when they are not active. This behaviour can be changed to\n     * 'active', which renders only when the tab is active, and 'lazy', meaning while inactive tab panels will not be rendered\n     * initially, they will remain mounted once they are active until the entire Tabs tree is unmounted.\n     */\n    render?: 'always' | 'active' | 'lazy'\n}\n\n/**\n * Used to define the content to be rendered when a tab is active. Each `<TabPanel>` must have a corresponding `<Tab>` component.\n */\nexport const TabPanel = polymorphicComponent<'div', TabPanelProps, 'omitClassName'>(\n    function TabPanel(\n        { children, id, as, render = 'always', ...props },\n        ref,\n    ): React.ReactElement | null {\n        const tabContextValue = React.useContext(TabsContext)\n        const [tabRendered, setTabRendered] = React.useState(false)\n        const tabIsActive = tabContextValue?.tabState.selectedId === id\n\n        React.useEffect(\n            function trackTabRenderedState() {\n                if (!tabRendered && tabIsActive) {\n                    setTabRendered(true)\n                }\n            },\n            [tabRendered, tabIsActive],\n        )\n\n        if (!tabContextValue) {\n            return null\n        }\n\n        const { tabState } = tabContextValue\n        const shouldRender =\n            render === 'always' ||\n            (render === 'active' && tabIsActive) ||\n            (render === 'lazy' && (tabIsActive || tabRendered))\n\n        return shouldRender ? (\n            <BaseTabPanel tabId={id} {...props} state={tabState} as={as} ref={ref}>\n                {children}\n            </BaseTabPanel>\n        ) : null\n    },\n)\n\ntype TabAwareSlotProps = {\n    /**\n     * Render prop used to provide the content to be rendered inside the slot. The render prop will be\n     * called with the current `selectedId`\n     */\n    children: (provided: { selectedId?: string | null }) => React.ReactElement | null\n}\n\n/**\n * Allows content to be rendered based on the current tab being selected while outside of the TabPanel\n * component. Can be placed freely within the main `<Tabs>` component.\n */\nexport function TabAwareSlot({ children }: TabAwareSlotProps): React.ReactElement | null {\n    const tabContextValue = React.useContext(TabsContext)\n\n    return tabContextValue ? children({ selectedId: tabContextValue?.tabState.selectedId }) : null\n}\n"],"names":["TabsContext","React","Tabs","children","selectedId","defaultSelectedId","variant","onSelectedIdChange","tabState","useTabState","setSelectedId","previousDefaultSelectedId","usePrevious","actualSelectedId","select","selectDefaultTab","undefined","memoizedTabState","memoizeTabState","Provider","value","Tab","polymorphicComponent","ref","as","id","exceptionallySetClassName","props","tabContextValue","BaseTab","className","classNames","styles","tab","state","TabList","space","Box","BaseTabList","position","width","track","Inline","TabPanel","render","tabRendered","setTabRendered","tabIsActive","trackTabRenderedState","shouldRender","BaseTabPanel","tabId","TabAwareSlot"],"mappings":"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"}

package/es/new-components/tabs/tabs.module.css.js

@@ -1,4 +1,4 @@
-var modules_40c67f5b = {"tab":"_15d4bbf4","tab-normal":"ca31866d","tab-primary":"_421272bd","tab-secondary":"acbdf95a","tab-tertiary":"_8c59ab40","tab-plain":"a41904c9"};
+var modules_40c67f5b = {"tab":"a1064a3b","track":"_06f1b8a1","tab-neutral":"dabbec7d","tab-themed":"e6f5ae4e","track-neutral":"_43913ce5","track-themed":"_39bdfdde","track-xsmall":"_1c148f4e","track-small":"_2a370df5","track-medium":"_77430437","track-large":"_33db5352","track-xlarge":"_60bf9564","track-xxlarge":"_29a35080"};
 
 export default modules_40c67f5b;
 //# sourceMappingURL=tabs.module.css.js.map

package/lib/components/color-picker/color-picker.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=e(require("react")),o=e(require("classnames")),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=n}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:c(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:c(r)?r.color:r,colorIndex:l,onClick:a,tooltip:c(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:n,tooltip:c}){const a=t.createElement("span",{className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==n?void 0:n(o)},t.createElement("span",{className:"color_item--inner_ring"}));return c?t.createElement(r.Tooltip,{content:c},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=i,exports.ColorPicker=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),o=e(require("classnames")),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const c=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],n=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=c}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:n(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:n(r)?r.color:r,colorIndex:l,onClick:a,tooltip:n(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:c,tooltip:n}){const a=t.createElement("span",{"data-testid":"reactist-color-item",className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==c?void 0:c(o)},t.createElement("span",{className:"color_item--inner_ring"}));return n?t.createElement(r.Tooltip,{content:n},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=c,exports.ColorItem=i,exports.ColorPicker=a;
 //# sourceMappingURL=color-picker.js.map

package/lib/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"qRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,wBACII,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EArBnE5B,EAAY+B,YAAc,cAuB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            data-testid=\"reactist-color-item\"\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"qRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,sCACgB,sBACZI,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EAtBnE5B,EAAY+B,YAAc,cAwB1BT,EAAUS,YAAc"}

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

@@ -30,8 +30,12 @@ declare class Box extends React.Component<React.PropsWithChildren<BoxProps>, Box
     render(): JSX.Element;
 }
 declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-declare type TriggerProps = Omit<NativeButtonProps, 'title'> & {
+declare type TriggerProps = Omit<NativeButtonProps, 'title' | 'onClick'> & {
     tooltip?: React.ReactNode;
+    /**
+     * @private the onClick prop is not to be used externally
+     */
+    onClick?: NativeButtonProps['onClick'];
 };
 declare type BodyProps = {
     setPosition?: React.Ref<HTMLDivElement>;
@@ -45,7 +49,7 @@ declare namespace Body {
 }
 declare const Dropdown: {
     Box: typeof Box;
-    Trigger: React.ForwardRefExoticComponent<Pick<TriggerProps, "key" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "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" | "children" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tooltip"> & React.RefAttributes<HTMLButtonElement>>;
+    Trigger: React.ForwardRefExoticComponent<Pick<TriggerProps, "onClick" | "key" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "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" | "children" | "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" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tooltip"> & React.RefAttributes<HTMLButtonElement>>;
     Body: typeof Body;
 };
 export { Dropdown };

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

@@ -1,2 +1,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=t(require("react")),i=t(require("classnames")),s=t(require("react-dom")),n=require("../deprecated-button/index.js");const r=["children","onClick","tooltip","className"];class l extends o.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=s.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=s.findDOMNode(this);if(!o)return;const i=s.findDOMNode(this).offsetTop,n=o.querySelector(".trigger");if(!n)return;const r=e.clientHeight+e.scrollTop-i-n.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:s}=this.props,n={top:t,right:e,setPosition:this._setPosition},r=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),l=null==s?void 0:s[1],d="function"==typeof l?l(n):l?o.cloneElement(l,n):void 0;return o.createElement("div",{className:r,style:{position:"relative"}},d)}render(){const t=i("reactist_dropdown",this.props.className),{top:e}=this.state;return o.createElement("div",{style:{display:"inline-block"},className:t},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}l.displayName=void 0,l.displayName="Dropdown.Box";const d=o.forwardRef((function(t,s){let{children:l,onClick:d,tooltip:c,className:a}=t,p=e.objectWithoutProperties(t,r);return o.createElement(n.default,e.objectSpread2(e.objectSpread2({},p),{},{className:i("trigger",a),onClick:function(t){t.preventDefault(),t.stopPropagation(),d&&d(t)},tooltip:c,ref:s}),l)}));function c({top:t,right:e,children:i,setPosition:s}){const n={position:"absolute",right:0,top:0};return t&&(n.top="auto",n.bottom=0),e&&(n.right="auto",n.left=0),o.createElement("div",{ref:s,style:n,className:"body",id:"reactist-dropdown-body"},i)}d.displayName="Dropdown.Trigger",c.displayName="Dropdown.Body",exports.Dropdown={Box:l,Trigger:d,Body:c};
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=t(require("react")),i=t(require("classnames")),s=t(require("react-dom")),n=require("../deprecated-button/index.js");const r=["children","onClick","tooltip","className"];class d extends o.Component{constructor(t,e){super(t,e),this._timeout=void 0,this._handleClickOutside=t=>{const e=s.findDOMNode(this);e&&!e.contains(t.target)?this._toggleShowBody():this.props.allowBodyInteractions||(this._timeout=setTimeout(()=>{this.state.showBody&&this._toggleShowBody()},100))},this._toggleShowBody=()=>{this.state.showBody?(this.props.onHideBody&&this.props.onHideBody(),document.removeEventListener("click",this._handleClickOutside,!0)):(this.props.onShowBody&&this.props.onShowBody(),document.addEventListener("click",this._handleClickOutside,!0)),this.setState({showBody:!this.state.showBody})},this._setPosition=t=>{if(t){const e=document.getElementById(this.props.scrolling_parent?this.props.scrolling_parent:"");if(e){const o=s.findDOMNode(this);if(!o)return;const i=s.findDOMNode(this).offsetTop,n=o.querySelector(".trigger");if(!n)return;const r=e.clientHeight+e.scrollTop-i-n.clientHeight<t.clientHeight;r!==this.state.top&&this.setState({top:r})}}},this.state={showBody:!1,top:t.top||!1},this._timeout=void 0}componentWillUnmount(){document.removeEventListener("click",this._handleClickOutside,!0),this._timeout&&clearTimeout(this._timeout)}_getTriggerComponent(){var t;const e=null==(t=this.props.children)?void 0:t[0];return e?o.cloneElement(e,{onClick:this._toggleShowBody}):void 0}_getBodyComponent(){if(!this.state.showBody)return null;const{top:t}=this.state,{right:e=!1,children:s}=this.props,n={top:t,right:e,setPosition:this._setPosition},r=i({body_wrapper:!0,with_arrow:!0,top:t,bottom:!t}),d=null==s?void 0:s[1],l="function"==typeof d?d(n):d?o.cloneElement(d,n):void 0;return o.createElement("div",{className:r,style:{position:"relative"}},l)}render(){const t=i("reactist_dropdown",this.props.className),{top:e}=this.state;return o.createElement("div",{style:{display:"inline-block"},className:t,"data-testid":"reactist-dropdown-box"},e&&this._getBodyComponent(),this._getTriggerComponent(),!e&&this._getBodyComponent())}}d.displayName=void 0,d.displayName="Dropdown.Box";const l=o.forwardRef((function(t,s){let{children:d,onClick:l,tooltip:a,className:c}=t,p=e.objectWithoutProperties(t,r);return o.createElement(n.default,e.objectSpread2(e.objectSpread2({},p),{},{className:i("trigger",c),onClick:function(t){t.preventDefault(),t.stopPropagation(),l&&l(t)},tooltip:a,ref:s}),d)}));function a({top:t,right:e,children:i,setPosition:s}){const n={position:"absolute",right:0,top:0};return t&&(n.top="auto",n.bottom=0),e&&(n.right="auto",n.left=0),o.createElement("div",{ref:s,style:n,className:"body",id:"reactist-dropdown-body","data-testid":"reactist-dropdown-body"},i)}l.displayName="Dropdown.Trigger",a.displayName="Dropdown.Body",exports.Dropdown={Box:d,Trigger:l,Body:a};
 //# sourceMappingURL=dropdown.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import 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 style={{ display: 'inline-block' }} className={className}>\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'> & {\n    tooltip?: React.ReactNode\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 ref={setPosition} style={style} className=\"body\" id=\"reactist-dropdown-body\">\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","Component","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","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","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 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","Component","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","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"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"}

package/lib/components/tooltip/tooltip.d.ts

@@ -10,6 +10,6 @@ declare type TooltipProps = Omit<AriakitTooltipProps, 'children' | 'state'> & {
 };
 export declare const SHOW_DELAY = 500;
 export declare const HIDE_DELAY = 100;
-declare function Tooltip({ children, content, position, gapSize, className, ...props }: TooltipProps): JSX.Element;
+declare function Tooltip({ children, content, position, gapSize, className, ...props }: TooltipProps): JSX.Element | null;
 export type { TooltipProps };
 export { Tooltip };

package/lib/components/tooltip/tooltip.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"),o=e(require("react")),n=e(require("classnames")),r=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:a=3,className:i}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const n=r.useTooltipState(e),c=function(){const e=o.useRef(),t=o.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return o.useEffect(()=>t,[t]),o.useCallback((function(o,n){return()=>{t(),e.current=setTimeout(o,n)}}),[t])}();return o.useMemo(()=>t.objectSpread2(t.objectSpread2({},n),{},{show:c(()=>n.show(),500),hide:c(()=>n.hide(),100)}),[c,n])}({placement:s,gutter:a}),d=o.Children.only(u);return l?o.createElement(o.Fragment,null,o.createElement(r.TooltipAnchor,t.objectSpread2(t.objectSpread2({state:f},d.props),{},{ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}}),e=>o.cloneElement(d,e)),f.visible?o.createElement(r.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:n("reactist_tooltip",i)}),"function"==typeof l?l():l):null):d};
+"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=e(require("react")),o=e(require("classnames")),n=require("ariakit/tooltip");const c=["children","content","position","gapSize","className"];exports.HIDE_DELAY=100,exports.SHOW_DELAY=500,exports.Tooltip=function(e){let{children:u,content:l,position:s="top",gapSize:i=3,className:a}=e,p=t.objectWithoutProperties(e,c);const f=function(e){const o=n.useTooltipState(e),c=function(){const e=r.useRef(),t=r.useCallback((function(){null!=e.current&&clearTimeout(e.current)}),[]);return r.useEffect(()=>t,[t]),r.useCallback((function(r,o){return()=>{t(),e.current=setTimeout(r,o)}}),[t])}();return r.useMemo(()=>t.objectSpread2(t.objectSpread2({},o),{},{show:c(()=>o.show(),500),hide:c(()=>o.hide(),100)}),[c,o])}({placement:s,gutter:i}),d=r.Children.only(u);if(!l||!d)return d;if("string"==typeof d.ref)throw new Error("Tooltip: String refs cannot be used as they cannot be forwarded");return r.createElement(r.Fragment,null,r.createElement(n.TooltipAnchor,{state:f,ref:d.ref,onFocus:function(e){var t;e.currentTarget.addEventListener("keyup",(function(e){const t=e.key;"Escape"!==t&&"Enter"!==t&&"Space"!==t&&f.show()}),{once:!0}),e.preventDefault(),null==d||null==(t=d.props)||null==t.onFocus||t.onFocus(e)}},e=>r.cloneElement(d,t.objectSpread2(t.objectSpread2({},e),d.props))),f.visible?r.createElement(n.Tooltip,t.objectSpread2(t.objectSpread2({},p),{},{state:f,className:o("reactist_tooltip",a)}),"function"==typeof l?l():l):null)};
 //# sourceMappingURL=tooltip.js.map