@doist/reactist 11.6.0 → 12.0.3

package/lib/components/menu/menu.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as Reakit from 'reakit/Menu';
+import * as Ariakit from 'ariakit/menu';
 import './menu.less';
 declare type NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>;
-declare type MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {
+declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
     /**
      * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a
      * `MenuButton` that triggers the menu to be opened or closed.
@@ -19,19 +19,20 @@ declare type MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {
 };
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
- * management for the menu components inside it.
+ * management for the menu components inside it. Note that if you are relying on the `[role='menu']`
+ * attribute to style the menu list, it is applied a `menubar` role instead in Safari.
  */
 declare function Menu({ children, onItemSelect, ...props }: MenuProps): JSX.Element;
-declare type MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>;
+declare type MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>;
 /**
  * A button to toggle a dropdown menu open or closed.
  */
-declare const MenuButton: import("../../utils/polymorphism").PolymorphicComponent<"button", Pick<Reakit.MenuButtonProps, "children" | "unstable_system" | "disabled" | "focusable" | "unstable_clickOnEnter" | "unstable_clickOnSpace" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key" | "wrapElement" | "autoFocus" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value">, "obfuscateClassName">;
-declare type MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>;
+declare const MenuButton: import("../../utils/polymorphism").PolymorphicComponent<"button", MenuButtonProps, "obfuscateClassName">;
+declare type MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>;
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
-declare const MenuList: import("../../utils/polymorphism").PolymorphicComponent<"div", Pick<Reakit.MenuProps, "children" | "unstable_system" | "disabled" | "focusable" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key" | "wrapElement" | "hideOnClickOutside" | "preventBodyScroll" | "unstable_initialFocusRef" | "unstable_finalFocusRef" | "unstable_orphan" | "unstable_autoFocusOnShow" | "unstable_autoFocusOnHide">, "obfuscateClassName">;
+declare const MenuList: import("../../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
 declare type MenuItemProps = {
     /**
      * An optional value given to this menu item. It is passed on to the parent `Menu`'s
@@ -109,7 +110,7 @@ declare type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>;
  * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
  * opening a sub-menu with the menu items list below it.
  */
-declare const SubMenu: React.ForwardRefExoticComponent<Pick<MenuProps, "children" | "onItemSelect"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLButtonElement>>;
 declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
     /**
      * A label to be shown visually and also used to semantically label the group.

package/lib/components/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),o=require("react"),n=(e(o),e(require("classnames"))),r=require("../../utils/polymorphism.js"),l=require("../../hooks/use-previous/use-previous.js"),i=require("reakit/Menu"),a=require("reakit/Popover"),s=["children","onItemSelect"],c=["exceptionallySetClassName"],u=["handleItemSelect"],m=["exceptionallySetClassName"],p=["handleItemSelect"],d=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName"],b=["handleItemSelect"],h=["children","onItemSelect"],f=["handleItemSelect"],v=["label","children","exceptionallySetClassName"],S=["handleItemSelect"],j=o.createContext({});function C(e){var n=e.children,r=e.onItemSelect,l=t.objectWithoutPropertiesLoose(e,s),a=i.useMenuState(t.objectSpread2({loop:!0,unstable_offset:[8,8]},l)),c=o.useCallback((function(e){r&&r(e)}),[r]),u=o.useMemo((function(){return t.objectSpread2(t.objectSpread2({},a),{},{handleItemSelect:c})}),[a,c]);return o.createElement(j.Provider,{value:u},n)}var x=r.polymorphicComponent((function(e,r){var l=e.exceptionallySetClassName,a=t.objectWithoutPropertiesLoose(e,c),s=o.useContext(j),m=t.objectWithoutPropertiesLoose(s,u);return o.createElement(i.MenuButton,Object.assign({},a,m,{ref:r,className:n("reactist_menubutton",l)}))})),I={width:"100%",height:"100%",position:"fixed",top:0,left:0};function P(e){return o.createElement(a.PopoverBackdrop,{baseId:e.baseId,visible:e.visible,animated:e.animated,animating:e.animating,stopAnimation:e.stopAnimation,modal:e.modal,style:I},e.children)}var y=r.polymorphicComponent((function(e,r){var a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,m),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,p),d=l.usePrevious(u.visible);return o.useEffect((function(){var e,t;!1===u.visible&&!0===d&&(null===(e=u.unstable_referenceRef)||void 0===e||null===(t=e.current)||void 0===t||t.focus())}),[u.visible,d,u.unstable_referenceRef]),u.visible?o.createElement(P,Object.assign({},u),o.createElement(i.Menu,Object.assign({},s,u,{ref:r,className:n("reactist_menulist",a)}))):null})),M=r.polymorphicComponent((function(e,n){var r=e.value,l=e.children,a=e.onSelect,s=e.hideOnSelect,c=void 0===s||s,u=e.onClick,m=e.exceptionallySetClassName,p=t.objectWithoutPropertiesLoose(e,d),h=o.useContext(j),f=h.handleItemSelect,v=t.objectWithoutPropertiesLoose(h,b),S=v.hide,C=o.useCallback((function(e){null==u||u(e);var t=!1!==(a&&!e.defaultPrevented?a():void 0)&&c;f(r),t&&S()}),[a,u,f,c,S,r]);return o.createElement(i.MenuItem,Object.assign({},p,v,{ref:n,onClick:C,className:m}),l)})),N=o.forwardRef((function(e,r){var l=e.children,a=e.onItemSelect,s=t.objectWithoutPropertiesLoose(e,h),c=o.useContext(j),u=c.handleItemSelect,m=t.objectWithoutPropertiesLoose(c,f),p=m.hide,d=o.useCallback((function(e){a&&a(e),u(e),p()}),[p,u,a]),b=o.Children.toArray(l),v=b[0],S=b[1];return o.createElement(i.MenuItem,Object.assign({},m,s,{ref:r}),(function(e){return o.createElement(C,{onItemSelect:d},o.cloneElement(v,t.objectSpread2(t.objectSpread2({},e),{},{className:n(e.className,"reactist_submenu_button")})),S)}))})),_=r.polymorphicComponent((function(e,n){var r=e.label,l=e.children,a=e.exceptionallySetClassName,s=t.objectWithoutPropertiesLoose(e,v),c=o.useContext(j),u=t.objectWithoutPropertiesLoose(c,S);return o.createElement(i.MenuGroup,Object.assign({ref:n},s,u,{className:a}),r?o.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},r):null,l)}));exports.Menu=C,exports.MenuButton=x,exports.MenuGroup=_,exports.MenuItem=M,exports.MenuList=y,exports.SubMenu=N;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../../utils/polymorphism.js"),r=require("ariakit/menu"),a=require("ariakit/portal");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["exceptionallySetClassName"],i=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],p=["label","children","exceptionallySetClassName"],m=n.createContext({});function d(e){let{children:o,onItemSelect:l}=e,a=t.objectWithoutProperties(e,c);const s=r.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:8},a)),u=n.useCallback((function(e){l&&l(e)}),[l]),i=n.useMemo(()=>({state:s,handleItemSelect:u}),[s,u]);return n.createElement(m.Provider,{value:i},o)}const b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:a}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(m);return n.createElement(r.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",a)}))})),S=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,u);const{state:i}=n.useContext(m);return i.visible?n.createElement(a.Portal,{preserveTabOrder:!0},n.createElement(r.Menu,t.objectSpread2(t.objectSpread2({},s),{},{state:i,ref:l,className:o("reactist_menulist",c)}))):null})),h=l.polymorphicComponent((function(e,o){let{value:l,children:a,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:p,as:d="button"}=e,b=t.objectWithoutProperties(e,i);const{handleItemSelect:S,state:h}=n.useContext(m),{hide:C}=h,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;S(l),t&&C()}),[c,u,S,s,C,l]);return n.createElement(r.MenuItem,t.objectSpread2(t.objectSpread2({},b),{},{as:d,state:h,ref:o,onClick:f,className:p,hideOnClick:!1}),a)})),C=n.forwardRef((function({children:e,onItemSelect:l},a){const{handleItemSelect:c,state:s}=n.useContext(m),{hide:u}=s,i=n.useCallback((function(e){l&&l(e),c(e),u()}),[u,c,l]),[p,b]=n.Children.toArray(e),S=r.useMenuItem({state:s});return n.createElement(d,{onItemSelect:i},n.cloneElement(p,t.objectSpread2(t.objectSpread2({},S),{},{className:o(S.className,"reactist_submenu_button"),ref:a})),b)})),f=l.polymorphicComponent((function(e,o){let{label:l,children:a,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,p);const{state:u}=n.useContext(m);return n.createElement(r.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,a)}));exports.Menu=d,exports.MenuButton=b,exports.MenuGroup=f,exports.MenuItem=h,exports.MenuList=S,exports.SubMenu=C;
 //# sourceMappingURL=menu.js.map

package/lib/components/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { usePrevious } from '../../hooks/use-previous'\n\n//\n// Reactist menu is a thin wrapper around Reakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Reakit from 'reakit/Menu'\nimport { PopoverBackdrop } from 'reakit/Popover'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = Reakit.MenuStateReturn & {\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Reakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Reakit.MenuInitialState, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Reakit.useMenuState({ loop: true, unstable_offset: [8, 8], ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            ...state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Reakit.MenuButtonProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuButton\n            {...props}\n            {...state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuBackdropProps = Reakit.MenuStateReturn & {\n    children: React.ReactNode\n}\n\nconst BACKDROP_STYLE: React.CSSProperties = {\n    width: '100%',\n    height: '100%',\n    position: 'fixed',\n    top: 0,\n    left: 0,\n}\n\n/**\n * Internal component to provide a backdrop/overlay to all menus. This is needed because reakit's\n * menus do not show an overlay by default.\n */\nfunction MenuBackdrop({\n    baseId,\n    visible,\n    animated,\n    animating,\n    stopAnimation,\n    modal,\n    children,\n}: MenuBackdropProps) {\n    return (\n        <PopoverBackdrop\n            baseId={baseId}\n            visible={visible}\n            animated={animated}\n            animating={animating}\n            stopAnimation={stopAnimation}\n            modal={modal}\n            style={BACKDROP_STYLE}\n        >\n            {children}\n        </PopoverBackdrop>\n    )\n}\n\ntype MenuListProps = Omit<Reakit.MenuProps, keyof Reakit.MenuStateReturn | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const previousVisible = usePrevious(state.visible)\n\n    React.useEffect(\n        function focusTriggerOnClose() {\n            if (state.visible === false && previousVisible === true) {\n                state.unstable_referenceRef?.current?.focus()\n            }\n        },\n        [state.visible, previousVisible, state.unstable_referenceRef],\n    )\n\n    return state.visible ? (\n        <MenuBackdrop {...state}>\n            <Reakit.Menu\n                {...props}\n                {...state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </MenuBackdrop>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Reakit.MenuItem\n            {...props}\n            {...state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n        >\n            {children}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, ...state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    return (\n        <Reakit.MenuItem {...state} {...props} ref={ref}>\n            {(buttonProps) => (\n                <Menu onItemSelect={handleSubItemSelect}>\n                    {React.cloneElement(button as React.ReactElement, {\n                        ...buttonProps,\n                        className: classNames(buttonProps.className, 'reactist_submenu_button'),\n                    })}\n                    {list}\n                </Menu>\n            )}\n        </Reakit.MenuItem>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroud(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { handleItemSelect, ...state } = React.useContext(MenuContext)\n    return (\n        <Reakit.MenuGroup ref={ref} {...props} {...state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Reakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Reakit","loop","unstable_offset","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","PopoverBackdrop","baseId","visible","animated","animating","stopAnimation","modal","style","MenuList","previousVisible","usePrevious","unstable_referenceRef","current","focus","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","shouldClose","defaultPrevented","undefined","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","label","role"],"mappings":"ywBA0BMA,EAAcC,gBAMhB,IA4BJ,SAASC,SAAOC,IAAAA,SAAUC,IAAAA,aAAiBC,sCACjCC,EAAQC,gCAAsBC,MAAM,EAAMC,gBAAiB,CAAC,EAAG,IAAOJ,IAEtEK,EAAmBT,eACrB,SAA0BU,GAClBP,GAAcA,EAAaO,KAEnC,CAACP,IAGCO,EAA0BV,WAC5B,qDACOK,OACHI,iBAAAA,MAEJ,CAACJ,EAAOI,WAGLT,gBAACD,EAAYY,UAASD,MAAOA,GAAQR,OAY1CU,EAAaC,wBAAgD,WAE/DC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,8BACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAanDG,EAAsC,CACxCC,MAAO,OACPC,OAAQ,OACRC,SAAU,QACVC,IAAK,EACLC,KAAM,GAOV,SAASC,YAUDxB,gBAACyB,mBACGC,SAVRA,OAWQC,UAVRA,QAWQC,WAVRA,SAWQC,YAVRA,UAWQC,gBAVRA,cAWQC,QAVRA,MAWQC,MAAOd,KAVfhB,cAsBE+B,EAAWpB,wBAA2C,WAExDC,OADEC,IAAAA,0BAA8BX,wCAGOJ,aAAiBD,GAA3BM,sCACvB6B,EAAkBC,cAAY9B,EAAMsB,gBAE1C3B,aACI,oBAC0B,IAAlBK,EAAMsB,UAAyC,IAApBO,cAC3B7B,EAAM+B,gDAAuBC,wBAASC,WAG9C,CAACjC,EAAMsB,QAASO,EAAiB7B,EAAM+B,wBAGpC/B,EAAMsB,QACT3B,gBAACwB,mBAAiBnB,GACdL,gBAACM,wBACOF,EACAC,GACJS,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFwB,EAAW1B,wBAA8C,WAU3DC,OARIJ,IAAAA,MACAR,IAAAA,SACAsC,IAAAA,aACAC,aAAAA,gBACAC,IAAAA,QACA3B,IAAAA,0BACGX,wCAIgCJ,aAAiBD,GAAhDU,IAAAA,iBAAqBJ,sCACrBsC,EAAStC,EAATsC,KAEFC,EAAc5C,eAChB,SAAqB6C,GACjBH,MAAAA,GAAAA,EAAUG,OAGJC,GAAiC,KADnCN,IAAaK,EAAME,iBAAmBP,SAAaQ,IACPP,EAChDhC,EAAiBC,GACboC,GAAaH,MAErB,CAACH,EAAUE,EAASjC,EAAkBgC,EAAcE,EAAMjC,WAI1DV,gBAACM,4BACOF,EACAC,GACJS,IAAKA,EACL4B,QAASE,EACT5B,UAAWD,IAEVb,MAgCP+C,EAAUjD,cAAkD,WAE9Dc,OADEZ,IAAAA,SAAUC,IAAAA,aAAiBC,wCAGgCJ,aAAiBD,GAApDmD,IAAlBzC,iBAA2CJ,sCACrC8C,EAAmB9C,EAAzBsC,KAEFS,EAAsBpD,eACxB,SAA6BU,GACrBP,GAAcA,EAAaO,GAC/BwC,EAAqBxC,GACrByC,MAEJ,CAACA,EAAgBD,EAAsB/C,MAGpBH,WAAeqD,QAAQnD,GAAvCoD,OAAQC,cAGXvD,gBAACM,4BAAoBD,EAAWD,GAAOU,IAAKA,KACvC,SAAC0C,UACExD,gBAACC,GAAKE,aAAciD,GACfpD,eAAmBsD,qCACbE,OACHxC,UAAWC,EAAWuC,EAAYxC,UAAW,8BAEhDuC,SAwBfE,EAAY5C,wBAA4C,WAE1DC,OADE4C,IAAAA,MAAOxD,IAAAA,SAAUa,IAAAA,0BAA8BX,wCAGVJ,aAAiBD,GAA3BM,6CAEzBL,gBAACM,2BAAiBQ,IAAKA,GAASV,EAAWC,GAAOW,UAAWD,IACxD2C,EACG1D,uBAAK2D,KAAK,eAAe3C,UAAU,6BAC9B0C,GAEL,KACHxD"}
+{"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\nimport { useMenuItem } from 'ariakit/menu'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it. Note that if you are relying on the `[role='menu']`\n * attribute to style the menu list, it is applied a `menubar` role instead in Safari.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const state = Ariakit.useMenuState({ focusLoop: true, gutter: 8, shift: 8, ...props })\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.visible ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLButtonElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    const menuProps = useMenuItem({ state })\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            {React.cloneElement(button as React.ReactElement, {\n                ...menuProps,\n                className: classNames(menuProps.className, 'reactist_submenu_button'),\n                ref,\n            })}\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, SubMenuProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","state","Ariakit","focusLoop","gutter","shift","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","MenuList","visible","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","as","hide","handleClick","event","shouldClose","defaultPrevented","undefined","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","menuProps","useMenuItem","MenuGroup","label","role"],"mappings":"8kBA2BMA,EAAcC,gBAMhB,IA6BJ,SAASC,SAAKC,SAAEA,EAAFC,aAAYA,KAAiBC,iCACvC,MAAMC,EAAQC,gCAAuBC,WAAW,EAAMC,OAAQ,EAAGC,MAAO,GAAML,IAExEM,EAAmBV,eACrB,SAA0BW,GAClBR,GAAcA,EAAaQ,KAEnC,CAACR,IAGCQ,EAA0BX,UAC5B,MACIK,MAAAA,EACAK,iBAAAA,IAEJ,CAACL,EAAOK,IAGZ,OAAOV,gBAACD,EAAYa,UAASD,MAAOA,GAAQT,SAY1CW,EAAaC,wBAAgD,WAE/DC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,gDACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,sBAAuBF,SAcnDG,EAAWL,wBAA2C,WAExDC,OADAC,0BAAEA,KAA8BZ,iCAGhC,MAAMC,MAAEA,GAAUL,aAAiBD,GAEnC,OAAOM,EAAMe,QACTpB,gBAACqB,UAAOC,qBACJtB,gBAACM,0CACOF,OACJC,MAAOA,EACPU,IAAKA,EACLE,UAAWC,EAAW,oBAAqBF,OAGnD,QA8DFO,EAAWT,wBAA8C,WAW3DC,OAVAJ,MACIA,EADJT,SAEIA,EAFJsB,SAGIA,EAHJC,aAIIA,GAAe,EAJnBC,QAKIA,EALJV,0BAMIA,EANJW,GAOIA,EAAK,YACFvB,iCAIP,MAAMM,iBAAEA,EAAFL,MAAoBA,GAAUL,aAAiBD,IAC/C6B,KAAEA,GAASvB,EAEXwB,EAAc7B,eAChB,SAAqB8B,SACjBJ,GAAAA,EAAUI,GACV,MAEMC,GAAiC,KADnCP,IAAaM,EAAME,iBAAmBR,SAAaS,IACPR,EAChDf,EAAiBC,GACboB,GAAaH,MAErB,CAACJ,EAAUE,EAAShB,EAAkBe,EAAcG,EAAMjB,IAG9D,OACIX,gBAACM,8CACOF,OACJuB,GAAIA,EACJtB,MAAOA,EACPU,IAAKA,EACLW,QAASG,EACTZ,UAAWD,EACXkB,aAAa,IAEZhC,MAgCPiC,EAAUnC,cAAkD,UAC9DE,SAAEA,EAAFC,aAAYA,GACZY,GAEA,MAAQL,iBAAkB0B,EAApB/B,MAA0CA,GAAUL,aAAiBD,IACnE6B,KAAMS,GAAmBhC,EAE3BiC,EAAsBtC,eACxB,SAA6BW,GACrBR,GAAcA,EAAaQ,GAC/ByB,EAAqBzB,GACrB0B,MAEJ,CAACA,EAAgBD,EAAsBjC,KAGpCoC,EAAQC,GAAQxC,WAAeyC,QAAQvC,GAExCwC,EAAYC,cAAY,CAAEtC,MAAAA,IAEhC,OACIL,gBAACC,GAAKE,aAAcmC,GACftC,eAAmBuC,qCACbG,OACHzB,UAAWC,EAAWwB,EAAUzB,UAAW,2BAC3CF,IAAAA,KAEHyB,MAsBPI,EAAY9B,wBAA4C,WAE1DC,OADA8B,MAAEA,EAAF3C,SAASA,EAATc,0BAAmBA,KAA8BZ,iCAGjD,MAAMC,MAAEA,GAAUL,aAAiBD,GACnC,OACIC,gBAACM,+CAAsBF,OAAOW,IAAKA,EAAKV,MAAOA,EAAOY,UAAWD,IAC5D6B,EACG7C,uBAAK8C,KAAK,eAAe7B,UAAU,6BAC9B4B,GAEL,KACH3C"}

package/lib/components/notification/notification.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"),l=e(require("react")),i=e(require("classnames")),n=require("../icons/CloseIcon.svg.js"),a=["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","aria-live"];exports.Notification=function(e){var o=e.id,c=e.icon,s=e.title,r=e.subtitle,u=e.children,b=e.customCloseButton,d=e.onClick,m=e.onClose,f=e.closeAltText,_=void 0===f?"Close":f,v=e.className,p=e["aria-live"],C=void 0===p?"polite":p,N=t.objectWithoutPropertiesLoose(e,a),j=s?o+"-title":null,E=j?{id:j}:null,g=r?o+"-subtitle":null,h=g?{id:g}:null,y=u?o+"-content":null,B=y?{"aria-labelledby":y}:j?{"aria-labelledby":j}:null,O=g&&!u?{"aria-describedby":g}:null,k=l.createElement("div",Object.assign({className:"reactist-notification__content"},u?{id:o+"-content"}:null),null!=u?u:l.createElement(l.Fragment,null,s?l.createElement("h3",Object.assign({className:"reactist-notification__title"},E),s):null,r?l.createElement("p",Object.assign({className:"reactist-notification__subtitle"},h),r):null)),q=l.createElement("div",{className:"reactist-notification__icon-content-group"},null!=c?c:null,k);return l.createElement("div",Object.assign({id:o,role:"alert",className:i("reactist-notification",v,{"reactist-notification--with-button":Boolean(d),"reactist-notification--with-close-button":Boolean(m)}),"aria-live":C},B,O,N),d?l.createElement("button",{className:"reactist-notification__button",onClick:d},q):q,m?l.createElement("button",{className:"reactist-notification__close-button",onClick:m,"aria-label":_},null!=b?b:l.createElement(n.default,null)):null)};
+"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"),l=e(require("react")),i=e(require("classnames")),n=require("../icons/CloseIcon.svg.js");const a=["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","aria-live"];exports.Notification=function(e){let{id:o,icon:c,title:r,subtitle:s,children:u,customCloseButton:b,onClick:d,onClose:m,closeAltText:f="Close",className:p,"aria-live":_="polite"}=e,j=t.objectWithoutProperties(e,a);const v=r?o+"-title":null,C=v?{id:v}:null,N=s?o+"-subtitle":null,E=N?{id:N}:null,h=u?o+"-content":null,S=h?{"aria-labelledby":h}:v?{"aria-labelledby":v}:null,y=N&&!u?{"aria-describedby":N}:null,B=l.createElement("div",t.objectSpread2({className:"reactist-notification__content"},u?{id:o+"-content"}:null),null!=u?u:l.createElement(l.Fragment,null,r?l.createElement("h3",t.objectSpread2({className:"reactist-notification__title"},C),r):null,s?l.createElement("p",t.objectSpread2({className:"reactist-notification__subtitle"},E),s):null)),g=l.createElement("div",{className:"reactist-notification__icon-content-group"},null!=c?c:null,B);return l.createElement("div",t.objectSpread2(t.objectSpread2(t.objectSpread2({id:o,role:"alert",className:i("reactist-notification",p,{"reactist-notification--with-button":Boolean(d),"reactist-notification--with-close-button":Boolean(m)}),"aria-live":_},S),y),j),d?l.createElement("button",{className:"reactist-notification__button",onClick:d},g):g,m?l.createElement("button",{className:"reactist-notification__close-button",onClick:m,"aria-label":f},null!=b?b:l.createElement(n.default,null)):null)};
 //# sourceMappingURL=notification.js.map

package/lib/components/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n    id: string\n    icon?: React.ReactNode\n    title?: React.ReactNode\n    subtitle?: React.ReactNode\n    children?: React.ReactNode\n    customCloseButton?: React.ReactNode\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    closeAltText?: string\n    className?: string\n    /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n    'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction Notification({\n    id,\n    icon,\n    title,\n    subtitle,\n    children,\n    customCloseButton,\n    onClick,\n    onClose,\n    closeAltText = 'Close',\n    className,\n    'aria-live': ariaLive = 'polite',\n    ...rest\n}: NotificationProps) {\n    const titleId = title ? `${id}-title` : null\n    const titleIdAttribute = titleId ? { id: titleId } : null\n    const subtitleId = subtitle ? `${id}-subtitle` : null\n    const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n    const contentId = children ? `${id}-content` : null\n    const contentIdAttribute = children ? { id: `${id}-content` } : null\n    const ariaLabelledBy = contentId\n        ? { 'aria-labelledby': contentId }\n        : titleId\n        ? { 'aria-labelledby': titleId }\n        : null\n    const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n    const notificationContent = (\n        <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n            {children ?? (\n                <>\n                    {title ? (\n                        <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n                            {title}\n                        </h3>\n                    ) : null}\n                    {subtitle ? (\n                        <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n                            {subtitle}\n                        </p>\n                    ) : null}\n                </>\n            )}\n        </div>\n    )\n    const notificationBody = (\n        <div className=\"reactist-notification__icon-content-group\">\n            {icon ?? null}\n            {notificationContent}\n        </div>\n    )\n\n    return (\n        <div\n            id={id}\n            role=\"alert\"\n            className={classNames('reactist-notification', className, {\n                'reactist-notification--with-button': Boolean(onClick),\n                'reactist-notification--with-close-button': Boolean(onClose),\n            })}\n            aria-live={ariaLive}\n            {...ariaLabelledBy}\n            {...ariaDescribedBy}\n            {...rest}\n        >\n            {onClick ? (\n                <button className=\"reactist-notification__button\" onClick={onClick}>\n                    {notificationBody}\n                </button>\n            ) : (\n                notificationBody\n            )}\n\n            {onClose ? (\n                <button\n                    className=\"reactist-notification__close-button\"\n                    onClick={onClose}\n                    aria-label={closeAltText}\n                >\n                    {customCloseButton ?? <CloseIcon />}\n                </button>\n            ) : null}\n        </div>\n    )\n}\n\nexport { Notification }\n"],"names":["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":"ibAoBA,gBACIA,IAAAA,GACAC,IAAAA,KACAC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,SACAC,IAAAA,kBACAC,IAAAA,QACAC,IAAAA,YACAC,aAAAA,aAAe,UACfC,IAAAA,cACA,aAAaC,aAAW,WACrBC,sCAEGC,EAAUV,EAAWF,WAAa,KAClCa,EAAmBD,EAAU,CAAEZ,GAAIY,GAAY,KAC/CE,EAAaX,EAAcH,cAAgB,KAC3Ce,EAAsBD,EAAa,CAAEd,GAAIc,GAAe,KACxDE,EAAYZ,EAAcJ,aAAe,KAEzCiB,EAAiBD,EACjB,mBAAqBA,GACrBJ,EACA,mBAAqBA,GACrB,KACAM,EAAkBJ,IAAeV,EAAW,oBAAsBU,GAAe,KAEjFK,EACFC,qCAAKX,UAAU,kCATQL,EAAW,CAAEJ,GAAOA,cAAiB,MAUvDI,MAAAA,EAAAA,EACGgB,gCACKlB,EACGkB,oCAAIX,UAAU,gCAAmCI,GAC5CX,GAEL,KACHC,EACGiB,mCAAGX,UAAU,mCAAsCM,GAC9CZ,GAEL,OAKdkB,EACFD,uBAAKX,UAAU,6CACVR,MAAAA,EAAAA,EAAQ,KACRkB,UAKLC,qCACIpB,GAAIA,EACJsB,KAAK,QACLb,UAAWc,EAAW,wBAAyBd,EAAW,sCAChBe,QAAQlB,8CACFkB,QAAQjB,iBAE7CG,GACPO,EACAC,EACAP,GAEHL,EACGc,0BAAQX,UAAU,gCAAgCH,QAASA,GACtDe,GAGLA,EAGHd,EACGa,0BACIX,UAAU,sCACVH,QAASC,eACGC,GAEXH,MAAAA,EAAAA,EAAqBe,gBAACK,iBAE3B"}
+{"version":3,"file":"notification.js","sources":["../../../src/components/notification/notification.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport CloseIcon from '../icons/CloseIcon.svg'\nimport './notification.less'\n\ntype NotificationProps = {\n    id: string\n    icon?: React.ReactNode\n    title?: React.ReactNode\n    subtitle?: React.ReactNode\n    children?: React.ReactNode\n    customCloseButton?: React.ReactNode\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n    closeAltText?: string\n    className?: string\n    /** Indicates that the notification will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n    'aria-live'?: 'off' | 'polite' | 'assertive'\n} & Omit<JSX.IntrinsicElements['div'], 'aria-live'>\n\nfunction Notification({\n    id,\n    icon,\n    title,\n    subtitle,\n    children,\n    customCloseButton,\n    onClick,\n    onClose,\n    closeAltText = 'Close',\n    className,\n    'aria-live': ariaLive = 'polite',\n    ...rest\n}: NotificationProps) {\n    const titleId = title ? `${id}-title` : null\n    const titleIdAttribute = titleId ? { id: titleId } : null\n    const subtitleId = subtitle ? `${id}-subtitle` : null\n    const subtitleIdAttribute = subtitleId ? { id: subtitleId } : null\n    const contentId = children ? `${id}-content` : null\n    const contentIdAttribute = children ? { id: `${id}-content` } : null\n    const ariaLabelledBy = contentId\n        ? { 'aria-labelledby': contentId }\n        : titleId\n        ? { 'aria-labelledby': titleId }\n        : null\n    const ariaDescribedBy = subtitleId && !children ? { 'aria-describedby': subtitleId } : null\n\n    const notificationContent = (\n        <div className=\"reactist-notification__content\" {...contentIdAttribute}>\n            {children ?? (\n                <>\n                    {title ? (\n                        <h3 className=\"reactist-notification__title\" {...titleIdAttribute}>\n                            {title}\n                        </h3>\n                    ) : null}\n                    {subtitle ? (\n                        <p className=\"reactist-notification__subtitle\" {...subtitleIdAttribute}>\n                            {subtitle}\n                        </p>\n                    ) : null}\n                </>\n            )}\n        </div>\n    )\n    const notificationBody = (\n        <div className=\"reactist-notification__icon-content-group\">\n            {icon ?? null}\n            {notificationContent}\n        </div>\n    )\n\n    return (\n        <div\n            id={id}\n            role=\"alert\"\n            className={classNames('reactist-notification', className, {\n                'reactist-notification--with-button': Boolean(onClick),\n                'reactist-notification--with-close-button': Boolean(onClose),\n            })}\n            aria-live={ariaLive}\n            {...ariaLabelledBy}\n            {...ariaDescribedBy}\n            {...rest}\n        >\n            {onClick ? (\n                <button className=\"reactist-notification__button\" onClick={onClick}>\n                    {notificationBody}\n                </button>\n            ) : (\n                notificationBody\n            )}\n\n            {onClose ? (\n                <button\n                    className=\"reactist-notification__close-button\"\n                    onClick={onClose}\n                    aria-label={closeAltText}\n                >\n                    {customCloseButton ?? <CloseIcon />}\n                </button>\n            ) : null}\n        </div>\n    )\n}\n\nexport { Notification }\n"],"names":["id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","aria-live","ariaLive","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","ariaLabelledBy","aria-labelledby","ariaDescribedBy","aria-describedby","notificationContent","React","notificationBody","role","classNames","reactist-notification--with-button","Boolean","reactist-notification--with-close-button","CloseIcon"],"mappings":"ubAoBA,gBAAsBA,GAClBA,EADkBC,KAElBA,EAFkBC,MAGlBA,EAHkBC,SAIlBA,EAJkBC,SAKlBA,EALkBC,kBAMlBA,EANkBC,QAOlBA,EAPkBC,QAQlBA,EARkBC,aASlBA,EAAe,QATGC,UAUlBA,EACAC,YAAaC,EAAW,YACrBC,iCAEH,MAAMC,EAAUX,EAAWF,WAAa,KAClCc,EAAmBD,EAAU,CAAEb,GAAIa,GAAY,KAC/CE,EAAaZ,EAAcH,cAAgB,KAC3CgB,EAAsBD,EAAa,CAAEf,GAAIe,GAAe,KACxDE,EAAYb,EAAcJ,aAAe,KAEzCkB,EAAiBD,EACjB,CAAEE,kBAAmBF,GACrBJ,EACA,CAAEM,kBAAmBN,GACrB,KACAO,EAAkBL,IAAeX,EAAW,CAAEiB,mBAAoBN,GAAe,KAEjFO,EACFC,uCAAKd,UAAU,kCATQL,EAAW,CAAEJ,GAAOA,cAAiB,YAUvDI,EAAAA,EACGmB,gCACKrB,EACGqB,sCAAId,UAAU,gCAAmCK,GAC5CZ,GAEL,KACHC,EACGoB,qCAAGd,UAAU,mCAAsCO,GAC9Cb,GAEL,OAKdqB,EACFD,uBAAKd,UAAU,mDACVR,EAAAA,EAAQ,KACRqB,GAIT,OACIC,uEACIvB,GAAIA,EACJyB,KAAK,QACLhB,UAAWiB,EAAW,wBAAyBjB,EAAW,CACtDkB,qCAAsCC,QAAQtB,GAC9CuB,2CAA4CD,QAAQrB,iBAE7CI,GACPO,GACAE,GACAR,GAEHN,EACGiB,0BAAQd,UAAU,gCAAgCH,QAASA,GACtDkB,GAGLA,EAGHjB,EACGgB,0BACId,UAAU,sCACVH,QAASC,eACGC,SAEXH,EAAAA,EAAqBkB,gBAACO,iBAE3B"}

package/lib/components/popover/popover.d.ts

@@ -46,7 +46,7 @@ declare class Popover extends React.Component<Props> {
     popover: HTMLElement;
     wrapper: HTMLElement;
     _updatePopoverPosition: () => void;
-    _getClassNameForPosition: (position: Position) => string;
+    _getClassNameForPosition: (position: Position | undefined) => string;
     _updatePopoverRef: (popover: HTMLElement) => void;
     _updateWrapperRef: (wrapper: HTMLElement) => void;
     render(): JSX.Element;

package/lib/components/popover/popover.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")),p=e(require("classnames")),i=require("./positioning-utils.js"),r=function(e){function r(){var t;return(t=e.apply(this,arguments)||this)._updatePopoverPosition=function(){for(var e=t.props,o=e.position,p=e.allowVaguePositioning,r=e.gapSize,n=t.wrapper.getBoundingClientRect(),s=t.popover.getBoundingClientRect(),a=document.documentElement,l=t.wrapper,u=!1;!u;)"absolute"!==getComputedStyle(l).getPropertyValue("position")&&l!==a&&l.parentElement?l=l.parentElement:u=!0;for(var h=l.getBoundingClientRect(),c={height:h.height,width:h.width},f={height:s.height,width:s.width},g={height:n.height,width:n.width},v={x:n.left-h.left,y:n.top-h.top},d={x:n.left,y:n.top},m="auto"===o?["top","right","bottom","left","top"]:"vertical"===o?["top","bottom"]:"horizontal"===o?["left","right"]:[o],w=0;w<m.length;w++){var _=m[w];if(i.hasEnoughSpace(c,f,g,v,_,r)||w===m.length-1){var P=i.calculatePosition(_,g,d,f,r);t.popover.style.top=P.y+"px",t.popover.style.left=P.x+"px",p&&(P.x<0&&(t.popover.style.left=2*r+"px"),P.y+f.height>c.height&&(t.popover.style.top=c.height-f.height-2*r+"px")),_!==o&&(t.popover.className=t._getClassNameForPosition(_));break}}},t._getClassNameForPosition=function(e){var o=t.props,i=o.visible,r=o.withArrow,n=o.arrowClassName,s=p("reactist_popover",{visible:i});return i&&r?p(s,n,{arrow_top:"bottom"===e,arrow_right:"left"===e,arrow_bottom:"auto"===e||"top"===e,arrow_left:"right"===e}):s},t._updatePopoverRef=function(e){t.popover=e,"function"==typeof t.props.popoverRef&&t.props.popoverRef(e)},t._updateWrapperRef=function(e){t.wrapper=e,"function"==typeof t.props.wrapperRef&&t.props.wrapperRef(e)},t}t.inheritsLoose(r,e);var n=r.prototype;return n.componentDidMount=function(){this.props.visible&&this._updatePopoverPosition()},n.componentDidUpdate=function(e){this.wrapper&&this.props.visible&&(e.position!==this.props.position||e.allowVaguePositioning!==this.props.allowVaguePositioning||e.visible!==this.props.visible||e.withArrow!==this.props.withArrow||e.gapSize!==this.props.gapSize||e.content!==this.props.content)&&this._updatePopoverPosition()},n.render=function(){var e=this.props,t=e.position,i=e.wrapperClassName,r=e.popoverClassName,n=e.onMouseEnter,s=e.onMouseLeave,a=e.onClick,l=e.trigger,u=e.content,h=t?this._getClassNameForPosition(t):"",c=p("reactist_popover__content",r),f=p("reactist_popover__wrapper",i),g=o.Children.only(l);return o.createElement("span",{className:f,onMouseEnter:n,onMouseLeave:s,ref:this._updateWrapperRef},o.cloneElement(g,{onClick:function(e){a&&a(e),"function"==typeof g.props.onClick&&g.props.onClick(e)}}),o.createElement("span",{className:h,ref:this._updatePopoverRef},this.props.visible?o.createElement("span",{className:c},"function"==typeof u?u():u):null))},r}(o.Component);r.displayName="Popover",r.defaultProps={position:"auto",gapSize:5},exports.Popover=r;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react")),o=t(require("classnames")),i=require("./positioning-utils.js");class p extends e.Component{constructor(...t){super(...t),this.popover=void 0,this.wrapper=void 0,this._updatePopoverPosition=()=>{const{position:t,allowVaguePositioning:e,gapSize:o}=this.props,p=this.wrapper.getBoundingClientRect(),s=this.popover.getBoundingClientRect(),r=document.documentElement;let n=this.wrapper,a=!1;for(;!a;)"absolute"!==getComputedStyle(n).getPropertyValue("position")&&n!==r&&n.parentElement?n=n.parentElement:a=!0;const l=n.getBoundingClientRect(),h={height:l.height,width:l.width},u={height:s.height,width:s.width},c={height:p.height,width:p.width},g={x:p.left-l.left,y:p.top-l.top},f={x:p.left,y:p.top},d="auto"===t?["top","right","bottom","left","top"]:"vertical"===t?["top","bottom"]:"horizontal"===t?["left","right"]:[t];for(let p=0;p<d.length;p++){const s=d[p];if(null!=s&&i.hasEnoughSpace(h,u,c,g,s,o)||p===d.length-1){const p=null!=s?i.calculatePosition(s,c,f,u,o):f;this.popover.style.top=p.y+"px",this.popover.style.left=p.x+"px",e&&(p.x<0&&(this.popover.style.left=2*o+"px"),p.y+u.height>h.height&&(this.popover.style.top=h.height-u.height-2*o+"px")),s!==t&&(this.popover.className=this._getClassNameForPosition(s));break}}},this._getClassNameForPosition=t=>{const{visible:e,withArrow:i,arrowClassName:p}=this.props,s=o("reactist_popover",{visible:e});return e&&i?o(s,p,{arrow_top:"bottom"===t,arrow_right:"left"===t,arrow_bottom:"auto"===t||"top"===t,arrow_left:"right"===t}):s},this._updatePopoverRef=t=>{this.popover=t,"function"==typeof this.props.popoverRef&&this.props.popoverRef(t)},this._updateWrapperRef=t=>{this.wrapper=t,"function"==typeof this.props.wrapperRef&&this.props.wrapperRef(t)}}componentDidMount(){this.props.visible&&this._updatePopoverPosition()}componentDidUpdate(t){if(this.wrapper&&this.props.visible){const e=t.allowVaguePositioning!==this.props.allowVaguePositioning,o=t.visible!==this.props.visible,i=t.withArrow!==this.props.withArrow,p=t.gapSize!==this.props.gapSize,s=t.content!==this.props.content;(t.position!==this.props.position||e||o||i||p||s)&&this._updatePopoverPosition()}}render(){const{position:t,wrapperClassName:i,popoverClassName:p,onMouseEnter:s,onMouseLeave:r,onClick:n,trigger:a,content:l}=this.props,h=t?this._getClassNameForPosition(t):"",u=o("reactist_popover__content",p),c=o("reactist_popover__wrapper",i),g=e.Children.only(a);return e.createElement("span",{className:c,onMouseEnter:s,onMouseLeave:r,ref:this._updateWrapperRef},e.cloneElement(g,{onClick:function(t){n&&n(t),"function"==typeof g.props.onClick&&g.props.onClick(t)}}),e.createElement("span",{className:h,ref:this._updatePopoverRef},this.props.visible?e.createElement("span",{className:u},"function"==typeof l?l():l):null))}}p.displayName=void 0,p.defaultProps=void 0,p.displayName="Popover",p.defaultProps={position:"auto",gapSize:5},exports.Popover=p;
 //# sourceMappingURL=popover.js.map

package/lib/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { hasEnoughSpace, calculatePosition, RelativePosition } from './positioning-utils'\n\nimport './popover.less'\n\n/**\n * Position of the popover. Defaults to `auto`.\n * `auto` tries to position the tooltip to the top,\n * if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).\n * Setting a distinct value like `right` will always position the popover right, regardless of available space.\n * Specifying `horizontal` will only try to position the tooltip left and right in that order.\n * Specifying `vertical` will only try to position the tooltip top and bottom in that order.\n */\ntype Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto'\n\ntype Props = {\n    visible?: boolean\n    /** ref of the popover in case you need to manipulate it. */\n    popoverRef?: React.Ref<HTMLElement>\n    /** ref of the wrapper in case you need to manipulate it. */\n    wrapperRef?: React.Ref<HTMLElement>\n    /** Function to be called when the mouse enters the trigger. */\n    onMouseEnter?: React.MouseEventHandler\n    /** Function to be called when the mouse leaves the trigger. */\n    onMouseLeave?: React.MouseEventHandler\n    onClick?: React.MouseEventHandler\n    /** Additional css class that is applied to the wrapper element. */\n    wrapperClassName?: string\n    /** Additional css class that is applied to the popover element. */\n    popoverClassName?: string\n    /** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */\n    arrowClassName?: string\n    /** Content prop of the popover. */\n    content?: (() => React.ReactNode) | React.ReactNode\n    trigger?: React.ReactNode\n    position: Position\n    withArrow?: boolean\n    /**\n     * Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.\n     */\n    allowVaguePositioning?: boolean\n    /** Gap between the popover wrapper and the arrow. */\n    gapSize: number\n}\n\nclass Popover extends React.Component<Props> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    componentDidMount() {\n        if (this.props.visible) {\n            this._updatePopoverPosition()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (this.wrapper && this.props.visible) {\n            const positionChanged = prevProps.position !== this.props.position\n            const vaguePositioningChanged =\n                prevProps.allowVaguePositioning !== this.props.allowVaguePositioning\n            const visibilityChanged = prevProps.visible !== this.props.visible\n            const arrowChanged = prevProps.withArrow !== this.props.withArrow\n            const gapSizeChanged = prevProps.gapSize !== this.props.gapSize\n            const contentChanged = prevProps.content !== this.props.content\n            if (\n                positionChanged ||\n                vaguePositioningChanged ||\n                visibilityChanged ||\n                arrowChanged ||\n                gapSizeChanged ||\n                contentChanged\n            ) {\n                this._updatePopoverPosition()\n            }\n        }\n    }\n\n    popover!: HTMLElement\n    wrapper!: HTMLElement\n\n    _updatePopoverPosition = () => {\n        const { position, allowVaguePositioning, gapSize } = this.props\n        const wrapperRect = this.wrapper.getBoundingClientRect()\n        const popoverRect = this.popover.getBoundingClientRect()\n\n        // Instead of using the documentElement find the nearest absolutely positioned element\n        const documentEl = document.documentElement\n        let node = this.wrapper\n        let foundParent = false\n        while (!foundParent) {\n            const styles = getComputedStyle(node)\n            const position = styles.getPropertyValue('position')\n            if (position === 'absolute' || node === documentEl || !node.parentElement) {\n                foundParent = true\n            } else {\n                node = node.parentElement\n            }\n        }\n        const nodeRect = node.getBoundingClientRect()\n        const windowDimensions = {\n            height: nodeRect.height,\n            width: nodeRect.width,\n        }\n\n        const popoverDimensions = {\n            height: popoverRect.height,\n            width: popoverRect.width,\n        }\n        const wrapperDimensions = {\n            height: wrapperRect.height,\n            width: wrapperRect.width,\n        }\n        const wrapperPositionRelative = {\n            x: wrapperRect.left - nodeRect.left,\n            y: wrapperRect.top - nodeRect.top,\n        }\n        const wrapperPositionAbsolute = {\n            x: wrapperRect.left,\n            y: wrapperRect.top,\n        }\n\n        const positionsToTry: RelativePosition[] =\n            position === 'auto'\n                ? ['top', 'right', 'bottom', 'left', 'top']\n                : position === 'vertical'\n                ? ['top', 'bottom']\n                : position === 'horizontal'\n                ? ['left', 'right']\n                : [position]\n\n        for (let index = 0; index < positionsToTry.length; index++) {\n            const currentPosition = positionsToTry[index]\n            const enoughSpaceAtPosition = hasEnoughSpace(\n                windowDimensions,\n                popoverDimensions,\n                wrapperDimensions,\n                wrapperPositionRelative,\n                currentPosition,\n                gapSize,\n            )\n\n            if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {\n                const popoverPosition = calculatePosition(\n                    currentPosition,\n                    wrapperDimensions,\n                    wrapperPositionAbsolute,\n                    popoverDimensions,\n                    gapSize,\n                )\n                this.popover.style.top = `${popoverPosition.y}px`\n                this.popover.style.left = `${popoverPosition.x}px`\n\n                /**\n                 * Correct placement if vague positioning is allowed.\n                 * When it's not allowed we \"cut off\" popovers and display them\n                 * out of the viewport to maintain their centered position.\n                 */\n                if (allowVaguePositioning) {\n                    // correct horizontally\n                    if (popoverPosition.x < 0) {\n                        this.popover.style.left = `${2 * gapSize}px`\n                    }\n                    // correct vertically\n                    if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {\n                        this.popover.style.top = `${\n                            windowDimensions.height - popoverDimensions.height - 2 * gapSize\n                        }px`\n                    }\n                }\n\n                if (currentPosition !== position) {\n                    this.popover.className = this._getClassNameForPosition(currentPosition)\n                }\n                break\n            }\n        }\n    }\n\n    _getClassNameForPosition = (position: Position) => {\n        const { visible, withArrow, arrowClassName } = this.props\n        const className = classNames('reactist_popover', { visible })\n\n        if (visible && withArrow) {\n            return classNames(className, arrowClassName, {\n                arrow_top: position === 'bottom',\n                arrow_right: position === 'left',\n                arrow_bottom: position === 'auto' || position === 'top',\n                arrow_left: position === 'right',\n            })\n        }\n        return className\n    }\n\n    _updatePopoverRef = (popover: HTMLElement) => {\n        this.popover = popover\n        if (typeof this.props.popoverRef === 'function') {\n            this.props.popoverRef(popover)\n        }\n    }\n\n    _updateWrapperRef = (wrapper: HTMLElement) => {\n        this.wrapper = wrapper\n        if (typeof this.props.wrapperRef === 'function') {\n            this.props.wrapperRef(wrapper)\n        }\n    }\n\n    render() {\n        const {\n            position,\n            wrapperClassName,\n            popoverClassName,\n            onMouseEnter,\n            onMouseLeave,\n            onClick,\n            trigger,\n            content,\n        } = this.props\n        const popoverClass = position ? this._getClassNameForPosition(position) : ''\n        const popoverContentClass = classNames('reactist_popover__content', popoverClassName)\n        const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName)\n        const triggerElement = React.Children.only<React.ReactElement>(\n            trigger as React.ReactElement,\n        )\n\n        function handleTriggerClick(event: React.SyntheticEvent) {\n            // @ts-expect-error This is temporary while we revisit the Popover interface\n            if (onClick) onClick(event)\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (typeof triggerElement.props.onClick === 'function') {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call\n                triggerElement.props.onClick(event)\n            }\n        }\n\n        return (\n            <span\n                className={wrapperClass}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                ref={this._updateWrapperRef}\n            >\n                {React.cloneElement(triggerElement, { onClick: handleTriggerClick })}\n                <span className={popoverClass} ref={this._updatePopoverRef}>\n                    {this.props.visible ? (\n                        <span className={popoverContentClass}>\n                            {typeof content === 'function' ? content() : content}\n                        </span>\n                    ) : null}\n                </span>\n            </span>\n        )\n    }\n}\nPopover.displayName = 'Popover'\nPopover.defaultProps = {\n    position: 'auto',\n    gapSize: 5, // default size of the arrow (see `tooltip.less`)\n}\n\nexport { Popover }\n"],"names":["Popover","_this","props","position","allowVaguePositioning","gapSize","wrapperRect","wrapper","getBoundingClientRect","popoverRect","popover","documentEl","document","documentElement","node","foundParent","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","popoverRef","wrapperRef","componentDidMount","this","_updatePopoverPosition","componentDidUpdate","prevProps","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","React","Children","only","ref","_updateWrapperRef","cloneElement","event","_updatePopoverRef","Component","displayName","defaultProps"],"mappings":"4RA+CMA,gGAmCuB,qBACgCC,EAAKC,MAAlDC,IAAAA,SAAUC,IAAAA,sBAAuBC,IAAAA,QACnCC,EAAcL,EAAKM,QAAQC,wBAC3BC,EAAcR,EAAKS,QAAQF,wBAG3BG,EAAaC,SAASC,gBACxBC,EAAOb,EAAKM,QACZQ,GAAc,GACVA,GAGa,aAFFC,iBAAiBF,GACRG,iBAAiB,aACVH,IAASH,GAAeG,EAAKI,cAGxDJ,EAAOA,EAAKI,cAFZH,GAAc,UAKhBI,EAAWL,EAAKN,wBAChBY,EAAmB,CACrBC,OAAQF,EAASE,OACjBC,MAAOH,EAASG,OAGdC,EAAoB,CACtBF,OAAQZ,EAAYY,OACpBC,MAAOb,EAAYa,OAEjBE,EAAoB,CACtBH,OAAQf,EAAYe,OACpBC,MAAOhB,EAAYgB,OAEjBG,EAA0B,CAC5BC,EAAGpB,EAAYqB,KAAOR,EAASQ,KAC/BC,EAAGtB,EAAYuB,IAAMV,EAASU,KAE5BC,EAA0B,CAC5BJ,EAAGpB,EAAYqB,KACfC,EAAGtB,EAAYuB,KAGbE,EACW,SAAb5B,EACM,CAAC,MAAO,QAAS,SAAU,OAAQ,OACtB,aAAbA,EACA,CAAC,MAAO,UACK,eAAbA,EACA,CAAC,OAAQ,SACT,CAACA,GAEF6B,EAAQ,EAAGA,EAAQD,EAAeE,OAAQD,IAAS,KAClDE,EAAkBH,EAAeC,MACTG,iBAC1Bf,EACAG,EACAC,EACAC,EACAS,EACA7B,IAGyB2B,IAAUD,EAAeE,OAAS,EAAG,KACxDG,EAAkBC,oBACpBH,EACAV,EACAM,EACAP,EACAlB,KAECK,QAAQ4B,MAAMT,IAASO,EAAgBR,SACvClB,QAAQ4B,MAAMX,KAAUS,EAAgBV,OAOzCtB,IAEIgC,EAAgBV,EAAI,MACfhB,QAAQ4B,MAAMX,KAAU,EAAItB,QAGjC+B,EAAgBR,EAAIL,EAAkBF,OAASD,EAAiBC,WAC3DX,QAAQ4B,MAAMT,IACfT,EAAiBC,OAASE,EAAkBF,OAAS,EAAIhB,SAKjE6B,IAAoB/B,MACfO,QAAQ6B,UAAYtC,EAAKuC,yBAAyBN,wCAO5C,SAAC/B,SACuBF,EAAKC,MAA5CuC,IAAAA,QAASC,IAAAA,UAAWC,IAAAA,eACtBJ,EAAYK,EAAW,mBAAoB,CAAEH,QAAAA,WAE/CA,GAAWC,EACJE,EAAWL,EAAWI,EAAgB,CACzCE,UAAwB,WAAb1C,EACX2C,YAA0B,SAAb3C,EACb4C,aAA2B,SAAb5C,GAAoC,QAAbA,EACrC6C,WAAyB,UAAb7C,IAGboC,uBAGS,SAAC7B,KACZA,QAAUA,EACsB,mBAA1BT,EAAKC,MAAM+C,cACb/C,MAAM+C,WAAWvC,wBAIV,SAACH,KACZA,QAAUA,EACsB,mBAA1BN,EAAKC,MAAMgD,cACbhD,MAAMgD,WAAW3C,sDA1J9B4C,kBAAA,WACQC,KAAKlD,MAAMuC,cACNY,4BAIbC,mBAAA,SAAmBC,GACXH,KAAK7C,SAAW6C,KAAKlD,MAAMuC,UACHc,EAAUpD,WAAaiD,KAAKlD,MAAMC,UAEtDoD,EAAUnD,wBAA0BgD,KAAKlD,MAAME,uBACzBmD,EAAUd,UAAYW,KAAKlD,MAAMuC,SACtCc,EAAUb,YAAcU,KAAKlD,MAAMwC,WACjCa,EAAUlD,UAAY+C,KAAKlD,MAAMG,SACjCkD,EAAUC,UAAYJ,KAAKlD,MAAMsD,eAS/CH,4BAuIjBI,OAAA,iBAUQL,KAAKlD,MARLC,IAAAA,SACAuD,IAAAA,iBACAC,IAAAA,iBACAC,IAAAA,aACAC,IAAAA,aACAC,IAAAA,QACAC,IAAAA,QACAP,IAAAA,QAEEQ,EAAe7D,EAAWiD,KAAKZ,yBAAyBrC,GAAY,GACpE8D,EAAsBrB,EAAW,4BAA6Be,GAC9DO,EAAetB,EAAW,4BAA6Bc,GACvDS,EAAiBC,EAAMC,SAASC,KAClCP,UAcAK,wBACI7B,UAAW2B,EACXN,aAAcA,EACdC,aAAcA,EACdU,IAAKnB,KAAKoB,mBAETJ,EAAMK,aAAaN,EAAgB,CAAEL,iBAjBlBY,GAEpBZ,GAASA,EAAQY,GAEuB,mBAAjCP,EAAejE,MAAM4D,SAE5BK,EAAejE,MAAM4D,QAAQY,MAY7BN,wBAAM7B,UAAWyB,EAAcO,IAAKnB,KAAKuB,mBACpCvB,KAAKlD,MAAMuC,QACR2B,wBAAM7B,UAAW0B,GACO,mBAAZT,EAAyBA,IAAYA,GAEjD,WA3MFY,EAAMQ,WAiN5B5E,EAAQ6E,YAAc,UACtB7E,EAAQ8E,aAAe,CACnB3E,SAAU,OACVE,QAAS"}
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport { hasEnoughSpace, calculatePosition, RelativePosition } from './positioning-utils'\n\nimport './popover.less'\n\n/**\n * Position of the popover. Defaults to `auto`.\n * `auto` tries to position the tooltip to the top,\n * if there's not enough space it tries to position the tooltip clockwise (right, bottom, left).\n * Setting a distinct value like `right` will always position the popover right, regardless of available space.\n * Specifying `horizontal` will only try to position the tooltip left and right in that order.\n * Specifying `vertical` will only try to position the tooltip top and bottom in that order.\n */\ntype Position = 'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal' | 'auto'\n\ntype Props = {\n    visible?: boolean\n    /** ref of the popover in case you need to manipulate it. */\n    popoverRef?: React.Ref<HTMLElement>\n    /** ref of the wrapper in case you need to manipulate it. */\n    wrapperRef?: React.Ref<HTMLElement>\n    /** Function to be called when the mouse enters the trigger. */\n    onMouseEnter?: React.MouseEventHandler\n    /** Function to be called when the mouse leaves the trigger. */\n    onMouseLeave?: React.MouseEventHandler\n    onClick?: React.MouseEventHandler\n    /** Additional css class that is applied to the wrapper element. */\n    wrapperClassName?: string\n    /** Additional css class that is applied to the popover element. */\n    popoverClassName?: string\n    /** Additional css class that is applied to style the arrow. Not applied when `withArrow` is false. */\n    arrowClassName?: string\n    /** Content prop of the popover. */\n    content?: (() => React.ReactNode) | React.ReactNode\n    trigger?: React.ReactNode\n    position: Position\n    withArrow?: boolean\n    /**\n     * Whether vague positioning is allowed. When set to true the popover prefers to be fully visible over being correctly centered.\n     */\n    allowVaguePositioning?: boolean\n    /** Gap between the popover wrapper and the arrow. */\n    gapSize: number\n}\n\nclass Popover extends React.Component<Props> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    componentDidMount() {\n        if (this.props.visible) {\n            this._updatePopoverPosition()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (this.wrapper && this.props.visible) {\n            const positionChanged = prevProps.position !== this.props.position\n            const vaguePositioningChanged =\n                prevProps.allowVaguePositioning !== this.props.allowVaguePositioning\n            const visibilityChanged = prevProps.visible !== this.props.visible\n            const arrowChanged = prevProps.withArrow !== this.props.withArrow\n            const gapSizeChanged = prevProps.gapSize !== this.props.gapSize\n            const contentChanged = prevProps.content !== this.props.content\n            if (\n                positionChanged ||\n                vaguePositioningChanged ||\n                visibilityChanged ||\n                arrowChanged ||\n                gapSizeChanged ||\n                contentChanged\n            ) {\n                this._updatePopoverPosition()\n            }\n        }\n    }\n\n    popover!: HTMLElement\n    wrapper!: HTMLElement\n\n    _updatePopoverPosition = () => {\n        const { position, allowVaguePositioning, gapSize } = this.props\n        const wrapperRect = this.wrapper.getBoundingClientRect()\n        const popoverRect = this.popover.getBoundingClientRect()\n\n        // Instead of using the documentElement find the nearest absolutely positioned element\n        const documentEl = document.documentElement\n        let node = this.wrapper\n        let foundParent = false\n        while (!foundParent) {\n            const styles = getComputedStyle(node)\n            const position = styles.getPropertyValue('position')\n            if (position === 'absolute' || node === documentEl || !node.parentElement) {\n                foundParent = true\n            } else {\n                node = node.parentElement\n            }\n        }\n        const nodeRect = node.getBoundingClientRect()\n        const windowDimensions = {\n            height: nodeRect.height,\n            width: nodeRect.width,\n        }\n\n        const popoverDimensions = {\n            height: popoverRect.height,\n            width: popoverRect.width,\n        }\n        const wrapperDimensions = {\n            height: wrapperRect.height,\n            width: wrapperRect.width,\n        }\n        const wrapperPositionRelative = {\n            x: wrapperRect.left - nodeRect.left,\n            y: wrapperRect.top - nodeRect.top,\n        }\n        const wrapperPositionAbsolute = {\n            x: wrapperRect.left,\n            y: wrapperRect.top,\n        }\n\n        const positionsToTry: RelativePosition[] =\n            position === 'auto'\n                ? ['top', 'right', 'bottom', 'left', 'top']\n                : position === 'vertical'\n                ? ['top', 'bottom']\n                : position === 'horizontal'\n                ? ['left', 'right']\n                : [position]\n\n        for (let index = 0; index < positionsToTry.length; index++) {\n            const currentPosition = positionsToTry[index]\n            const enoughSpaceAtPosition =\n                currentPosition != null\n                    ? hasEnoughSpace(\n                          windowDimensions,\n                          popoverDimensions,\n                          wrapperDimensions,\n                          wrapperPositionRelative,\n                          currentPosition,\n                          gapSize,\n                      )\n                    : false\n\n            if (enoughSpaceAtPosition || index === positionsToTry.length - 1) {\n                const popoverPosition =\n                    currentPosition != null\n                        ? calculatePosition(\n                              currentPosition,\n                              wrapperDimensions,\n                              wrapperPositionAbsolute,\n                              popoverDimensions,\n                              gapSize,\n                          )\n                        : wrapperPositionAbsolute\n                this.popover.style.top = `${popoverPosition.y}px`\n                this.popover.style.left = `${popoverPosition.x}px`\n\n                /**\n                 * Correct placement if vague positioning is allowed.\n                 * When it's not allowed we \"cut off\" popovers and display them\n                 * out of the viewport to maintain their centered position.\n                 */\n                if (allowVaguePositioning) {\n                    // correct horizontally\n                    if (popoverPosition.x < 0) {\n                        this.popover.style.left = `${2 * gapSize}px`\n                    }\n                    // correct vertically\n                    if (popoverPosition.y + popoverDimensions.height > windowDimensions.height) {\n                        this.popover.style.top = `${\n                            windowDimensions.height - popoverDimensions.height - 2 * gapSize\n                        }px`\n                    }\n                }\n\n                if (currentPosition !== position) {\n                    this.popover.className = this._getClassNameForPosition(currentPosition)\n                }\n                break\n            }\n        }\n    }\n\n    _getClassNameForPosition = (position: Position | undefined) => {\n        const { visible, withArrow, arrowClassName } = this.props\n        const className = classNames('reactist_popover', { visible })\n\n        if (visible && withArrow) {\n            return classNames(className, arrowClassName, {\n                arrow_top: position === 'bottom',\n                arrow_right: position === 'left',\n                arrow_bottom: position === 'auto' || position === 'top',\n                arrow_left: position === 'right',\n            })\n        }\n        return className\n    }\n\n    _updatePopoverRef = (popover: HTMLElement) => {\n        this.popover = popover\n        if (typeof this.props.popoverRef === 'function') {\n            this.props.popoverRef(popover)\n        }\n    }\n\n    _updateWrapperRef = (wrapper: HTMLElement) => {\n        this.wrapper = wrapper\n        if (typeof this.props.wrapperRef === 'function') {\n            this.props.wrapperRef(wrapper)\n        }\n    }\n\n    render() {\n        const {\n            position,\n            wrapperClassName,\n            popoverClassName,\n            onMouseEnter,\n            onMouseLeave,\n            onClick,\n            trigger,\n            content,\n        } = this.props\n        const popoverClass = position ? this._getClassNameForPosition(position) : ''\n        const popoverContentClass = classNames('reactist_popover__content', popoverClassName)\n        const wrapperClass = classNames('reactist_popover__wrapper', wrapperClassName)\n        const triggerElement = React.Children.only<React.ReactElement>(\n            trigger as React.ReactElement,\n        )\n\n        function handleTriggerClick(event: React.SyntheticEvent) {\n            // @ts-expect-error This is temporary while we revisit the Popover interface\n            if (onClick) onClick(event)\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (typeof triggerElement.props.onClick === 'function') {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call\n                triggerElement.props.onClick(event)\n            }\n        }\n\n        return (\n            <span\n                className={wrapperClass}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                ref={this._updateWrapperRef}\n            >\n                {React.cloneElement(triggerElement, { onClick: handleTriggerClick })}\n                <span className={popoverClass} ref={this._updatePopoverRef}>\n                    {this.props.visible ? (\n                        <span className={popoverContentClass}>\n                            {typeof content === 'function' ? content() : content}\n                        </span>\n                    ) : null}\n                </span>\n            </span>\n        )\n    }\n}\nPopover.displayName = 'Popover'\nPopover.defaultProps = {\n    position: 'auto',\n    gapSize: 5, // default size of the arrow (see `tooltip.less`)\n}\n\nexport { Popover }\n"],"names":["Popover","React","Component","popover","wrapper","_updatePopoverPosition","position","allowVaguePositioning","gapSize","this","props","wrapperRect","getBoundingClientRect","popoverRect","documentEl","document","documentElement","node","foundParent","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","_updatePopoverRef","popoverRef","_updateWrapperRef","wrapperRef","componentDidMount","componentDidUpdate","prevProps","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","Children","only","ref","cloneElement","event","displayName","defaultProps"],"mappings":"mOA+CA,MAAMA,UAAgBC,EAAMC,6CAgCxBC,oBACAC,oBAEAC,uBAAyB,KACrB,MAAMC,SAAEA,EAAFC,sBAAYA,EAAZC,QAAmCA,GAAYC,KAAKC,MACpDC,EAAcF,KAAKL,QAAQQ,wBAC3BC,EAAcJ,KAAKN,QAAQS,wBAG3BE,EAAaC,SAASC,gBAC5B,IAAIC,EAAOR,KAAKL,QACZc,GAAc,EAClB,MAAQA,GAGa,aAFFC,iBAAiBF,GACRG,iBAAiB,aACVH,IAASH,GAAeG,EAAKI,cAGxDJ,EAAOA,EAAKI,cAFZH,GAAc,EAKtB,MAAMI,EAAWL,EAAKL,wBAChBW,EAAmB,CACrBC,OAAQF,EAASE,OACjBC,MAAOH,EAASG,OAGdC,EAAoB,CACtBF,OAAQX,EAAYW,OACpBC,MAAOZ,EAAYY,OAEjBE,EAAoB,CACtBH,OAAQb,EAAYa,OACpBC,MAAOd,EAAYc,OAEjBG,EAA0B,CAC5BC,EAAGlB,EAAYmB,KAAOR,EAASQ,KAC/BC,EAAGpB,EAAYqB,IAAMV,EAASU,KAE5BC,EAA0B,CAC5BJ,EAAGlB,EAAYmB,KACfC,EAAGpB,EAAYqB,KAGbE,EACW,SAAb5B,EACM,CAAC,MAAO,QAAS,SAAU,OAAQ,OACtB,aAAbA,EACA,CAAC,MAAO,UACK,eAAbA,EACA,CAAC,OAAQ,SACT,CAACA,GAEX,IAAK,IAAI6B,EAAQ,EAAGA,EAAQD,EAAeE,OAAQD,IAAS,CACxD,MAAME,EAAkBH,EAAeC,GAavC,GAXuB,MAAnBE,GACMC,iBACIf,EACAG,EACAC,EACAC,EACAS,EACA7B,IAIe2B,IAAUD,EAAeE,OAAS,EAAG,CAC9D,MAAMG,EACiB,MAAnBF,EACMG,oBACIH,EACAV,EACAM,EACAP,EACAlB,GAEJyB,EACVxB,KAAKN,QAAQsC,MAAMT,IAASO,EAAgBR,OAC5CtB,KAAKN,QAAQsC,MAAMX,KAAUS,EAAgBV,OAOzCtB,IAEIgC,EAAgBV,EAAI,IACpBpB,KAAKN,QAAQsC,MAAMX,KAAU,EAAItB,QAGjC+B,EAAgBR,EAAIL,EAAkBF,OAASD,EAAiBC,SAChEf,KAAKN,QAAQsC,MAAMT,IACfT,EAAiBC,OAASE,EAAkBF,OAAS,EAAIhB,SAKjE6B,IAAoB/B,IACpBG,KAAKN,QAAQuC,UAAYjC,KAAKkC,yBAAyBN,IAE3D,cAKZM,yBAA4BrC,IACxB,MAAMsC,QAAEA,EAAFC,UAAWA,EAAXC,eAAsBA,GAAmBrC,KAAKC,MAC9CgC,EAAYK,EAAW,mBAAoB,CAAEH,QAAAA,IAEnD,OAAIA,GAAWC,EACJE,EAAWL,EAAWI,EAAgB,CACzCE,UAAwB,WAAb1C,EACX2C,YAA0B,SAAb3C,EACb4C,aAA2B,SAAb5C,GAAoC,QAAbA,EACrC6C,WAAyB,UAAb7C,IAGboC,QAGXU,kBAAqBjD,IACjBM,KAAKN,QAAUA,EACsB,mBAA1BM,KAAKC,MAAM2C,YAClB5C,KAAKC,MAAM2C,WAAWlD,SAI9BmD,kBAAqBlD,IACjBK,KAAKL,QAAUA,EACsB,mBAA1BK,KAAKC,MAAM6C,YAClB9C,KAAKC,MAAM6C,WAAWnD,IAhK9BoD,oBACQ/C,KAAKC,MAAMkC,SACXnC,KAAKJ,yBAIboD,mBAAmBC,GACf,GAAIjD,KAAKL,SAAWK,KAAKC,MAAMkC,QAAS,CACpC,MACMe,EACFD,EAAUnD,wBAA0BE,KAAKC,MAAMH,sBAC7CqD,EAAoBF,EAAUd,UAAYnC,KAAKC,MAAMkC,QACrDiB,EAAeH,EAAUb,YAAcpC,KAAKC,MAAMmC,UAClDiB,EAAiBJ,EAAUlD,UAAYC,KAAKC,MAAMF,QAClDuD,EAAiBL,EAAUM,UAAYvD,KAAKC,MAAMsD,SANhCN,EAAUpD,WAAaG,KAAKC,MAAMJ,UAStDqD,GACAC,GACAC,GACAC,GACAC,IAEAtD,KAAKJ,0BA6IjB4D,SACI,MAAM3D,SACFA,EADE4D,iBAEFA,EAFEC,iBAGFA,EAHEC,aAIFA,EAJEC,aAKFA,EALEC,QAMFA,EANEC,QAOFA,EAPEP,QAQFA,GACAvD,KAAKC,MACH8D,EAAelE,EAAWG,KAAKkC,yBAAyBrC,GAAY,GACpEmE,EAAsB1B,EAAW,4BAA6BoB,GAC9DO,EAAe3B,EAAW,4BAA6BmB,GACvDS,EAAiB1E,EAAM2E,SAASC,KAClCN,GAaJ,OACItE,wBACIyC,UAAWgC,EACXN,aAAcA,EACdC,aAAcA,EACdS,IAAKrE,KAAK6C,mBAETrD,EAAM8E,aAAaJ,EAAgB,CAAEL,QAjB9C,SAA4BU,GAEpBV,GAASA,EAAQU,GAEuB,mBAAjCL,EAAejE,MAAM4D,SAE5BK,EAAejE,MAAM4D,QAAQU,MAY7B/E,wBAAMyC,UAAW8B,EAAcM,IAAKrE,KAAK2C,mBACpC3C,KAAKC,MAAMkC,QACR3C,wBAAMyC,UAAW+B,GACO,mBAAZT,EAAyBA,IAAYA,GAEjD,QAjNlBhE,EACYiF,mBADZjF,EAEYkF,oBAqNlBlF,EAAQiF,YAAc,UACtBjF,EAAQkF,aAAe,CACnB5E,SAAU,OACVE,QAAS"}

package/lib/components/popover/positioning-utils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(t,e,i){return t.x+(e.width-i.width)/2},e=function(t,e,i){return t.y+(e.height-i.height)/2},i=function(e,i,o,n){return void 0===n&&(n=0),{x:t(i,e,o),y:i.y-o.height-n}},o=function(e,i,o,n){return void 0===n&&(n=0),{x:t(i,e,o),y:i.y+e.height+n}},n=function(t,i,o,n){return void 0===n&&(n=0),{x:i.x+t.width+n,y:e(i,t,o)}},r=function(t,i,o,n){return void 0===n&&(n=0),{x:i.x-o.width-n,y:e(i,t,o)}};exports.calculateBottomCenterPosition=o,exports.calculateLeftCenterPosition=r,exports.calculatePosition=function(t,e,h,u,c){return void 0===c&&(c=0),"top"===t?i(e,h,u,c):"right"===t?n(e,h,u,c):"bottom"===t?o(e,h,u,c):"left"===t?r(e,h,u,c):h},exports.calculateRightCenterPosition=n,exports.calculateTopCenterPosition=i,exports.hasEnoughSpace=function(i,o,n,r,h,u){void 0===u&&(u=0);var c=i.height,s=i.width,a=o.height,d=o.width,x=n.height,l=n.width,f=r.x,p=r.y,g=t(r,n,o),v=e(r,n,o),y=g>=0&&g+d<=s,w=v>=0&&v+a<=c;return"top"===h?y&&p-a-u>=0:"right"===h?w&&f+l+d+u<=s:"left"===h?w&&f-d-u>=0:"bottom"===h&&y&&p+x+a+u<=c};
+"use strict";function t(t,e,o){return t.x+(e.width-o.width)/2}function e(t,e,o){return t.y+(e.height-o.height)/2}Object.defineProperty(exports,"__esModule",{value:!0});const o=(e,o,i,h=0)=>({x:t(o,e,i),y:o.y-i.height-h}),i=(e,o,i,h=0)=>({x:t(o,e,i),y:o.y+e.height+h}),h=(t,o,i,h=0)=>({x:o.x+t.width+h,y:e(o,t,i)}),r=(t,o,i,h=0)=>({x:o.x-i.width-h,y:e(o,t,i)});exports.calculateBottomCenterPosition=i,exports.calculateLeftCenterPosition=r,exports.calculatePosition=(t,e,n,s,c=0)=>"top"===t?o(e,n,s,c):"right"===t?h(e,n,s,c):"bottom"===t?i(e,n,s,c):"left"===t?r(e,n,s,c):n,exports.calculateRightCenterPosition=h,exports.calculateTopCenterPosition=o,exports.hasEnoughSpace=(o,i,h,r,n,s=0)=>{const{height:c,width:x}=o,{height:l,width:u}=i,{height:a,width:p}=h,{x:g,y:d}=r,y=t(r,h,i),w=e(r,h,i),f=y>=0&&y+u<=x,P=w>=0&&w+l<=c;return"top"===n?f&&d-l-s>=0:"right"===n?P&&g+p+u+s<=x:"left"===n?P&&g-u-s>=0:"bottom"===n&&f&&d+a+l+s<=c};
 //# sourceMappingURL=positioning-utils.js.map

package/lib/components/popover/positioning-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"positioning-utils.js","sources":["../../../src/components/popover/positioning-utils.ts"],"sourcesContent":["type Dimensions = { width: number; height: number }\ntype AbsolutePosition = { x: number; y: number }\ntype RelativePosition = 'top' | 'right' | 'bottom' | 'left'\n\ntype HasEnoughSpaceFn = (\n    windowDimensions: Dimensions,\n    elementDimensions: Dimensions,\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    position: RelativePosition,\n    gap: number,\n) => boolean\n\nconst hasEnoughSpace: HasEnoughSpaceFn = (\n    windowDimensions,\n    elementDimensions,\n    wrapperDimensions,\n    wrapperPosition,\n    position,\n    gap = 0,\n) => {\n    const { height: windowHeight, width: windowWidth } = windowDimensions\n    const { height: elementHeight, width: elementWidth } = elementDimensions\n    const { height: wrapperHeight, width: wrapperWidth } = wrapperDimensions\n    const { x: wrapperX, y: wrapperY } = wrapperPosition\n\n    const verticalPosition = _calculateVerticalPosition(\n        wrapperPosition,\n        wrapperDimensions,\n        elementDimensions,\n    )\n    const horizontalPosition = _calculateHorizontalPosition(\n        wrapperPosition,\n        wrapperDimensions,\n        elementDimensions,\n    )\n    const canPlaceVertically =\n        verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth\n    const canPlaceHorizontally =\n        horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight\n\n    if (position === 'top') {\n        return canPlaceVertically && wrapperY - elementHeight - gap >= 0\n    } else if (position === 'right') {\n        return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth\n    } else if (position === 'left') {\n        return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0\n    } else if (position === 'bottom') {\n        return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight\n    }\n    return false\n}\n\ntype VerticalHorizontalPositionFn = (\n    wrapperPosition: AbsolutePosition,\n    wrapperDimensions: Dimensions,\n    elementDimensions: Dimensions,\n) => number\n\nconst _calculateVerticalPosition: VerticalHorizontalPositionFn = (\n    wrapperPosition,\n    wrapperDimensions,\n    elementDimensions,\n) => {\n    return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2\n}\n\nconst _calculateHorizontalPosition: VerticalHorizontalPositionFn = (\n    wrapperPosition,\n    wrapperDimensions,\n    elementDimensions,\n) => {\n    return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2\n}\n\ntype CenterPositionFn = (\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    elementDimensions: Dimensions,\n    gap?: number,\n) => AbsolutePosition\n\nconst calculateTopCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    const y = wrapperPosition.y - elementDimensions.height - gap\n    return { x, y }\n}\n\nconst calculateBottomCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    const y = wrapperPosition.y + wrapperDimensions.height + gap\n    return { x, y }\n}\n\nconst calculateRightCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = wrapperPosition.x + wrapperDimensions.width + gap\n    const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    return { x, y }\n}\n\nconst calculateLeftCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = wrapperPosition.x - elementDimensions.width - gap\n    const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    return { x, y }\n}\n\ntype PositionFn = (\n    position: 'top' | 'right' | 'bottom' | 'left',\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    elementDimensions: Dimensions,\n    gap?: number,\n) => AbsolutePosition\n\nconst calculatePosition: PositionFn = (\n    position,\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    if (position === 'top') {\n        return calculateTopCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'right') {\n        return calculateRightCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'bottom') {\n        return calculateBottomCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'left') {\n        return calculateLeftCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    }\n    return wrapperPosition\n}\n\nexport {\n    hasEnoughSpace,\n    calculatePosition,\n    calculateTopCenterPosition,\n    calculateBottomCenterPosition,\n    calculateRightCenterPosition,\n    calculateLeftCenterPosition,\n    RelativePosition,\n}\n"],"names":["_calculateVerticalPosition","wrapperPosition","wrapperDimensions","elementDimensions","x","width","_calculateHorizontalPosition","y","height","calculateTopCenterPosition","gap","calculateBottomCenterPosition","calculateRightCenterPosition","calculateLeftCenterPosition","position","windowDimensions","windowHeight","windowWidth","elementHeight","elementWidth","wrapperHeight","wrapperWidth","wrapperX","wrapperY","verticalPosition","horizontalPosition","canPlaceVertically","canPlaceHorizontally"],"mappings":"wEA2DMA,EAA2D,SAC7DC,EACAC,EACAC,UAEOF,EAAgBG,GAAKF,EAAkBG,MAAQF,EAAkBE,OAAS,GAG/EC,EAA6D,SAC/DL,EACAC,EACAC,UAEOF,EAAgBM,GAAKL,EAAkBM,OAASL,EAAkBK,QAAU,GAUjFC,EAA+C,SACjDP,EACAD,EACAE,EACAO,mBAAAA,IAAAA,EAAM,GAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIJ,EAAkBK,OAASE,IAIvDC,EAAkD,SACpDT,EACAD,EACAE,EACAO,mBAAAA,IAAAA,EAAM,GAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIL,EAAkBM,OAASE,IAIvDE,EAAiD,SACnDV,EACAD,EACAE,EACAO,mBAAAA,IAAAA,EAAM,GAIC,CAAEN,EAFCH,EAAgBG,EAAIF,EAAkBG,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,KAIzEU,EAAgD,SAClDX,EACAD,EACAE,EACAO,mBAAAA,IAAAA,EAAM,GAIC,CAAEN,EAFCH,EAAgBG,EAAID,EAAkBE,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,6GAYzC,SAClCW,EACAZ,EACAD,EACAE,EACAO,mBAAAA,IAAAA,EAAM,GAEW,QAAbI,EACOL,EACHP,EACAD,EACAE,EACAO,GAEgB,UAAbI,EACAF,EACHV,EACAD,EACAE,EACAO,GAEgB,WAAbI,EACAH,EACHT,EACAD,EACAE,EACAO,GAEgB,SAAbI,EACAD,EACHX,EACAD,EACAE,EACAO,GAGDT,sGA7J8B,SACrCc,EACAZ,EACAD,EACAD,EACAa,EACAJ,YAAAA,IAAAA,EAAM,OAEUM,EAAqCD,EAA7CP,OAA6BS,EAAgBF,EAAvBV,MACda,EAAuCf,EAA/CK,OAA8BW,EAAiBhB,EAAxBE,MACfe,EAAuClB,EAA/CM,OAA8Ba,EAAiBnB,EAAxBG,MACpBiB,EAA0BrB,EAA7BG,EAAgBmB,EAAatB,EAAhBM,EAEfiB,EAAmBxB,EACrBC,EACAC,EACAC,GAEEsB,EAAqBnB,EACvBL,EACAC,EACAC,GAEEuB,EACFF,GAAoB,GAAKA,EAAmBL,GAAgBF,EAC1DU,EACFF,GAAsB,GAAKA,EAAqBP,GAAiBF,QAEpD,QAAbF,EACOY,GAAsBH,EAAWL,EAAgBR,GAAO,EAC3C,UAAbI,EACAa,GAAwBL,EAAWD,EAAeF,EAAeT,GAAOO,EAC3D,SAAbH,EACAa,GAAwBL,EAAWH,EAAeT,GAAO,EAC5C,WAAbI,GACAY,GAAsBH,EAAWH,EAAgBF,EAAgBR,GAAOM"}
+{"version":3,"file":"positioning-utils.js","sources":["../../../src/components/popover/positioning-utils.ts"],"sourcesContent":["type Dimensions = { width: number; height: number }\ntype AbsolutePosition = { x: number; y: number }\ntype RelativePosition = 'top' | 'right' | 'bottom' | 'left'\n\ntype HasEnoughSpaceFn = (\n    windowDimensions: Dimensions,\n    elementDimensions: Dimensions,\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    position: RelativePosition,\n    gap: number,\n) => boolean\n\nconst hasEnoughSpace: HasEnoughSpaceFn = (\n    windowDimensions,\n    elementDimensions,\n    wrapperDimensions,\n    wrapperPosition,\n    position,\n    gap = 0,\n) => {\n    const { height: windowHeight, width: windowWidth } = windowDimensions\n    const { height: elementHeight, width: elementWidth } = elementDimensions\n    const { height: wrapperHeight, width: wrapperWidth } = wrapperDimensions\n    const { x: wrapperX, y: wrapperY } = wrapperPosition\n\n    const verticalPosition = _calculateVerticalPosition(\n        wrapperPosition,\n        wrapperDimensions,\n        elementDimensions,\n    )\n    const horizontalPosition = _calculateHorizontalPosition(\n        wrapperPosition,\n        wrapperDimensions,\n        elementDimensions,\n    )\n    const canPlaceVertically =\n        verticalPosition >= 0 && verticalPosition + elementWidth <= windowWidth\n    const canPlaceHorizontally =\n        horizontalPosition >= 0 && horizontalPosition + elementHeight <= windowHeight\n\n    if (position === 'top') {\n        return canPlaceVertically && wrapperY - elementHeight - gap >= 0\n    } else if (position === 'right') {\n        return canPlaceHorizontally && wrapperX + wrapperWidth + elementWidth + gap <= windowWidth\n    } else if (position === 'left') {\n        return canPlaceHorizontally && wrapperX - elementWidth - gap >= 0\n    } else if (position === 'bottom') {\n        return canPlaceVertically && wrapperY + wrapperHeight + elementHeight + gap <= windowHeight\n    }\n    return false\n}\n\nfunction _calculateVerticalPosition(\n    wrapperPosition: AbsolutePosition,\n    wrapperDimensions: Dimensions,\n    elementDimensions: Dimensions,\n): number {\n    return wrapperPosition.x + (wrapperDimensions.width - elementDimensions.width) / 2\n}\n\nfunction _calculateHorizontalPosition(\n    wrapperPosition: AbsolutePosition,\n    wrapperDimensions: Dimensions,\n    elementDimensions: Dimensions,\n): number {\n    return wrapperPosition.y + (wrapperDimensions.height - elementDimensions.height) / 2\n}\n\ntype CenterPositionFn = (\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    elementDimensions: Dimensions,\n    gap?: number,\n) => AbsolutePosition\n\nconst calculateTopCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    const y = wrapperPosition.y - elementDimensions.height - gap\n    return { x, y }\n}\n\nconst calculateBottomCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = _calculateVerticalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    const y = wrapperPosition.y + wrapperDimensions.height + gap\n    return { x, y }\n}\n\nconst calculateRightCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = wrapperPosition.x + wrapperDimensions.width + gap\n    const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    return { x, y }\n}\n\nconst calculateLeftCenterPosition: CenterPositionFn = (\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    const x = wrapperPosition.x - elementDimensions.width - gap\n    const y = _calculateHorizontalPosition(wrapperPosition, wrapperDimensions, elementDimensions)\n    return { x, y }\n}\n\ntype PositionFn = (\n    position: 'top' | 'right' | 'bottom' | 'left',\n    wrapperDimensions: Dimensions,\n    wrapperPosition: AbsolutePosition,\n    elementDimensions: Dimensions,\n    gap?: number,\n) => AbsolutePosition\n\nconst calculatePosition: PositionFn = (\n    position,\n    wrapperDimensions,\n    wrapperPosition,\n    elementDimensions,\n    gap = 0,\n) => {\n    if (position === 'top') {\n        return calculateTopCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'right') {\n        return calculateRightCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'bottom') {\n        return calculateBottomCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    } else if (position === 'left') {\n        return calculateLeftCenterPosition(\n            wrapperDimensions,\n            wrapperPosition,\n            elementDimensions,\n            gap,\n        )\n    }\n    return wrapperPosition\n}\n\nexport {\n    hasEnoughSpace,\n    calculatePosition,\n    calculateTopCenterPosition,\n    calculateBottomCenterPosition,\n    calculateRightCenterPosition,\n    calculateLeftCenterPosition,\n    RelativePosition,\n}\n"],"names":["_calculateVerticalPosition","wrapperPosition","wrapperDimensions","elementDimensions","x","width","_calculateHorizontalPosition","y","height","calculateTopCenterPosition","gap","calculateBottomCenterPosition","calculateRightCenterPosition","calculateLeftCenterPosition","position","windowDimensions","windowHeight","windowWidth","elementHeight","elementWidth","wrapperHeight","wrapperWidth","wrapperX","wrapperY","verticalPosition","horizontalPosition","canPlaceVertically","canPlaceHorizontally"],"mappings":"aAqDA,SAASA,EACLC,EACAC,EACAC,GAEA,OAAOF,EAAgBG,GAAKF,EAAkBG,MAAQF,EAAkBE,OAAS,EAGrF,SAASC,EACLL,EACAC,EACAC,GAEA,OAAOF,EAAgBM,GAAKL,EAAkBM,OAASL,EAAkBK,QAAU,+DAUjFC,EAA+C,CACjDP,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIJ,EAAkBK,OAASE,IAIvDC,EAAkD,CACpDT,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCJ,EAA2BC,EAAiBC,EAAmBC,GAE7DI,EADFN,EAAgBM,EAAIL,EAAkBM,OAASE,IAIvDE,EAAiD,CACnDV,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCH,EAAgBG,EAAIF,EAAkBG,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,KAIzEU,EAAgD,CAClDX,EACAD,EACAE,EACAO,EAAM,KAIC,CAAEN,EAFCH,EAAgBG,EAAID,EAAkBE,MAAQK,EAE5CH,EADFD,EAA6BL,EAAiBC,EAAmBC,6GAYzC,CAClCW,EACAZ,EACAD,EACAE,EACAO,EAAM,IAEW,QAAbI,EACOL,EACHP,EACAD,EACAE,EACAO,GAEgB,UAAbI,EACAF,EACHV,EACAD,EACAE,EACAO,GAEgB,WAAbI,EACAH,EACHT,EACAD,EACAE,EACAO,GAEgB,SAAbI,EACAD,EACHX,EACAD,EACAE,EACAO,GAGDT,qGAvJ8B,CACrCc,EACAZ,EACAD,EACAD,EACAa,EACAJ,EAAM,KAEN,MAAQF,OAAQQ,EAAcX,MAAOY,GAAgBF,GAC7CP,OAAQU,EAAeb,MAAOc,GAAiBhB,GAC/CK,OAAQY,EAAef,MAAOgB,GAAiBnB,GAC/CE,EAAGkB,EAAUf,EAAGgB,GAAatB,EAE/BuB,EAAmBxB,EACrBC,EACAC,EACAC,GAEEsB,EAAqBnB,EACvBL,EACAC,EACAC,GAEEuB,EACFF,GAAoB,GAAKA,EAAmBL,GAAgBF,EAC1DU,EACFF,GAAsB,GAAKA,EAAqBP,GAAiBF,EAErE,MAAiB,QAAbF,EACOY,GAAsBH,EAAWL,EAAgBR,GAAO,EAC3C,UAAbI,EACAa,GAAwBL,EAAWD,EAAeF,EAAeT,GAAOO,EAC3D,SAAbH,EACAa,GAAwBL,EAAWH,EAAeT,GAAO,EAC5C,WAAbI,GACAY,GAAsBH,EAAWH,EAAgBF,EAAgBR,GAAOM"}

package/lib/components/progress-bar/progress-bar.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),a=e(require("classnames")),t=require("../../new-components/hidden-visually/hidden-visually.js");function s(e){var s=e.fillPercentage,l=void 0===s?0:s,i=e["aria-valuetext"],n=a("reactist_progress_bar",e.className),u=l<0?0:l>100?100:l;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:u+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:u,max:100,"aria-valuetext":null!=i?i:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),a=e(require("classnames")),t=require("../../new-components/hidden-visually/hidden-visually.js");function s({fillPercentage:e=0,className:s,"aria-valuetext":l}){const n=a("reactist_progress_bar",s),i=e<0?0:e>100?100:e;return r.createElement("div",{className:n},r.createElement("div",{className:"inner",style:{width:i+"%"}}),r.createElement(t.HiddenVisually,null,r.createElement("progress",{value:i,max:100,"aria-valuetext":null!=l?l:void 0})))}s.displayName="ProgressBar",exports.ProgressBar=s;
 //# sourceMappingURL=progress-bar.js.map

package/lib/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","ariaValuetext","finalClassName","classNames","className","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"oQAcA,SAASA,aAAcC,eAAAA,aAAiB,IAAgCC,IAAlB,kBAC5CC,EAAiBC,EAAW,0BADKC,WAEjCC,EAAQL,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,SAEhEM,uBAAKF,UAAWF,GACZI,uBAAKF,UAAU,QAAQG,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,qBAAqBT,MAAAA,EAAAA,OAAiBU,MAKnFZ,EAAYa,YAAc"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["import React from 'react'\nimport { HiddenVisually } from '../../new-components/hidden-visually'\nimport classNames from 'classnames'\n\nimport './progress-bar.less'\n\ntype Props = {\n    /** Additional css class applied to the progress bar. */\n    className?: string\n    /** How much of the progress bar should be filled. Number between 0 and 100 inclusive. */\n    fillPercentage?: number\n    /** Defines the human readable text alternative for assitive technologies. */\n    'aria-valuetext'?: string\n}\nfunction ProgressBar({ fillPercentage = 0, className, 'aria-valuetext': ariaValuetext }: Props) {\n    const finalClassName = classNames('reactist_progress_bar', className)\n    const width = fillPercentage < 0 ? 0 : fillPercentage > 100 ? 100 : fillPercentage\n    return (\n        <div className={finalClassName}>\n            <div className=\"inner\" style={{ width: `${width}%` }} />\n            <HiddenVisually>\n                <progress value={width} max={100} aria-valuetext={ariaValuetext ?? undefined} />\n            </HiddenVisually>\n        </div>\n    )\n}\nProgressBar.displayName = 'ProgressBar'\n\nexport { ProgressBar }\n"],"names":["ProgressBar","fillPercentage","className","aria-valuetext","ariaValuetext","finalClassName","classNames","width","React","style","HiddenVisually","value","max","undefined","displayName"],"mappings":"oQAcA,SAASA,GAAYC,eAAEA,EAAiB,EAAnBC,UAAsBA,EAAWC,iBAAkBC,IACpE,MAAMC,EAAiBC,EAAW,wBAAyBJ,GACrDK,EAAQN,EAAiB,EAAI,EAAIA,EAAiB,IAAM,IAAMA,EACpE,OACIO,uBAAKN,UAAWG,GACZG,uBAAKN,UAAU,QAAQO,MAAO,CAAEF,MAAUA,SAC1CC,gBAACE,sBACGF,4BAAUG,MAAOJ,EAAOK,IAAK,2BAAqBR,EAAAA,OAAiBS,MAKnFb,EAAYc,YAAc"}

package/lib/components/select/select.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 a=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=e(require("react")),l=e(require("classnames")),s=["value","options","onChange","disabled","className","defaultValue"];function u(e){var u=e.value,i=e.options,o=void 0===i?[]:i,r=e.onChange,n=e.disabled,d=void 0===n||n,c=e.className,v=void 0===c?"":c,p=e.defaultValue,b=a.objectWithoutPropertiesLoose(e,s),f=l("reactist_select",{disabled:d},v);return t.createElement("select",Object.assign({className:f,value:u,onChange:function(e){return r?r(e.target.value):void 0},disabled:d,defaultValue:p},b),null==o?void 0:o.map((function(e){return t.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)})))}u.displayName="Select",u.defaultProps={options:[],disabled:!1},exports.Select=u;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var a=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=e(require("react")),l=e(require("classnames"));const s=["value","options","onChange","disabled","className","defaultValue"];function u(e){let{value:u,options:o=[],onChange:r,disabled:i=!0,className:d="",defaultValue:n}=e,c=a.objectWithoutProperties(e,s);const p=l("reactist_select",{disabled:i},d);return t.createElement("select",a.objectSpread2({className:p,value:u,onChange:e=>r?r(e.target.value):void 0,disabled:i,defaultValue:n},c),null==o?void 0:o.map(e=>t.createElement("option",{key:e.key||e.value,value:e.value,disabled:e.disabled},e.text)))}u.displayName="Select",u.defaultProps={options:[],disabled:!1},exports.Select=u;
 //# sourceMappingURL=select.js.map

package/lib/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"+TA6BA,SAASA,SACLC,IAAAA,UACAC,QAAAA,aAAU,KACVC,IAAAA,aACAC,SAAAA,oBACAC,UAAAA,aAAY,KACZC,IAAAA,aACGC,sCAEGC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,UAEhEK,wCACIL,UAAWG,EACXP,MAAOA,EACPE,SAAU,SAACQ,UAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,GAChET,SAAUA,EACVE,aAAcA,GACVC,GAEHL,MAAAA,SAAAA,EAASY,KAAI,SAACC,UACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,UAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"qUA6BA,SAASA,SAAOC,MACZA,EADYC,QAEZA,EAAU,GAFEC,SAGZA,EAHYC,SAIZA,GAAW,EAJCC,UAKZA,EAAY,GALAC,aAMZA,KACGC,iCAEH,MAAMC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,GACpE,OACIK,0CACIL,UAAWG,EACXP,MAAOA,EACPE,SAAWQ,GAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,EAChET,SAAUA,EACVE,aAAcA,GACVC,SAEHL,SAAAA,EAASY,IAAKC,GACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,QAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}

package/lib/components/time/time-utils.js

@@ -1,2 +1,2 @@
-"use strict";function o(o){return o&&"object"==typeof o&&"default"in o?o.default:o}Object.defineProperty(exports,"__esModule",{value:!0});var e=o(require("dayjs")),r=o(require("dayjs/plugin/localizedFormat"));e.extend(r),exports.TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo:function(o,r){void 0===r&&(r={});var t=r.locale,i=void 0===t?"en":t,a=r.shortFormatCurrentYear,d=void 0===a?this.SHORT_FORMAT_CURRENT_YEAR:a,f=r.shortFormatPastYear,n=void 0===f?this.SHORT_FORMAT_PAST_YEAR:f,m=r.daysSuffix,s=void 0===m?"d":m,R=r.hoursSuffix,u=void 0===R?"h":R,T=r.minutesSuffix,_=void 0===T?"m":T,l=r.momentsAgo,v=void 0===l?"moments ago":l,A=e(),O=e(1e3*o);O.locale(i);var c=A.diff(O,"minute"),F=A.diff(O,"hour"),S=A.diff(O,"day");return S>1?O.isSame(A,"year")?O.format(d):O.format(n):1===S?""+S+s:F>0&&F<=23?""+F+u:c>0&&c<=59?""+c+_:v},formatTime:function(o,r){void 0===r&&(r={});var t=r.locale,i=void 0===t?"en":t,a=r.shortFormatCurrentYear,d=void 0===a?this.SHORT_FORMAT_CURRENT_YEAR:a,f=r.shortFormatPastYear,n=void 0===f?this.SHORT_FORMAT_PAST_YEAR:f,m=e(1e3*o);return m.locale(i),m.isSame(e(),"year")?m.format(d):m.format(n)},formatTimeLong:function(o,r){void 0===r&&(r={});var t=r.locale,i=void 0===t?"en":t,a=r.longFormat,d=void 0===a?this.LONG_FORMAT:a,f=e(1e3*o);return f.locale(i),f.format(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=e(require("dayjs")),r=e(require("dayjs/plugin/localizedFormat"));t.extend(r),exports.TimeUtils={SHORT_FORMAT_CURRENT_YEAR:"L",SHORT_FORMAT_PAST_YEAR:"LL",LONG_FORMAT:"LL, LT",timeAgo(e,r={}){const{locale:o="en",shortFormatCurrentYear:a=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:s=this.SHORT_FORMAT_PAST_YEAR,daysSuffix:i="d",hoursSuffix:m="h",minutesSuffix:R="m",momentsAgo:n="moments ago"}=r,f=t(),T=t(1e3*e);T.locale(o);const u=f.diff(T,"minute"),_=f.diff(T,"hour"),l=f.diff(T,"day");return l>1?T.isSame(f,"year")?T.format(a):T.format(s):1===l?""+l+i:_>0&&_<=23?""+_+m:u>0&&u<=59?""+u+R:n},formatTime(e,r={}){const{locale:o="en",shortFormatCurrentYear:a=this.SHORT_FORMAT_CURRENT_YEAR,shortFormatPastYear:s=this.SHORT_FORMAT_PAST_YEAR}=r,i=t(1e3*e);return i.locale(o),i.isSame(t(),"year")?i.format(a):i.format(s)},formatTimeLong(e,r={}){const{locale:o="en",longFormat:a=this.LONG_FORMAT}=r,s=t(1e3*e);return s.locale(o),s.format(a)}};
 //# sourceMappingURL=time-utils.js.map

package/lib/components/time/time-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-utils.js","sources":["../../../src/components/time/time-utils.ts"],"sourcesContent":["import dayjs from 'dayjs'\n/**\n * There's a problem with our setup where the default export from\n * localizedFormat (and likely every other dayjs plugin) isn't properly\n * recognized. The proposed workarounds (importing with `.js` ending, or adding\n * `allowSyntheticDefaultImports` to the tsconfig) either broke linting or type\n * checking. After spending some time on this it was decided that further\n * investigations are not worth it, the code works and the eslint ignore is fine.\n * ref: https://github.com/iamkun/dayjs/issues/593\n * ref: https://day.js.org/docs/en/installation/typescript\n */\n// eslint-disable-next-line import/default\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat'\n\ndayjs.extend(LocalizedFormat)\n\ntype TimeConfig = {\n    locale?: string\n    longFormat?: string\n    shortFormatCurrentYear?: string\n    shortFormatPastYear?: string\n    daysSuffix?: string\n    hoursSuffix?: string\n    minutesSuffix?: string\n    momentsAgo?: string\n}\n\nconst TimeUtils = {\n    SHORT_FORMAT_CURRENT_YEAR: 'L',\n    SHORT_FORMAT_PAST_YEAR: 'LL',\n    LONG_FORMAT: 'LL, LT',\n\n    timeAgo(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n            daysSuffix = 'd',\n            hoursSuffix = 'h',\n            minutesSuffix = 'm',\n            momentsAgo = 'moments ago',\n        } = config\n        const now = dayjs()\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        const diffMinutes = now.diff(date, 'minute')\n        const diffHours = now.diff(date, 'hour')\n        const diffDays = now.diff(date, 'day')\n\n        if (diffDays > 1) {\n            if (date.isSame(now, 'year')) {\n                return date.format(shortFormatCurrentYear)\n            } else {\n                return date.format(shortFormatPastYear)\n            }\n        } else if (diffDays === 1) {\n            return `${diffDays}${daysSuffix}`\n        } else if (diffHours > 0 && diffHours <= 23) {\n            return `${diffHours}${hoursSuffix}`\n        } else if (diffMinutes > 0 && diffMinutes <= 59) {\n            return `${diffMinutes}${minutesSuffix}`\n        } else {\n            return momentsAgo\n        }\n    },\n\n    formatTime(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n        } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        if (date.isSame(dayjs(), 'year')) {\n            return date.format(shortFormatCurrentYear)\n        } else {\n            return date.format(shortFormatPastYear)\n        }\n    },\n\n    formatTimeLong(timestamp: number, config: TimeConfig = {}) {\n        const { locale = 'en', longFormat = this.LONG_FORMAT } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        return date.format(longFormat)\n    },\n}\n\nexport { TimeUtils, TimeConfig }\n"],"names":["dayjs","extend","LocalizedFormat","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","this","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":"iNAcAA,EAAMC,OAAOC,qBAaK,CACdC,0BAA2B,IAC3BC,uBAAwB,KACxBC,YAAa,SAEbC,iBAAQC,EAAmBC,YAAAA,IAAAA,EAAqB,UASxCA,EAPAC,OAAAA,aAAS,SAOTD,EANAE,uBAAAA,aAAyBC,KAAKR,8BAM9BK,EALAI,oBAAAA,aAAsBD,KAAKP,2BAK3BI,EAJAK,WAAAA,aAAa,QAIbL,EAHAM,YAAAA,aAAc,QAGdN,EAFAO,cAAAA,aAAgB,QAEhBP,EADAQ,WAAAA,aAAa,gBAEXC,EAAMjB,IACNkB,EAAOlB,EAAkB,IAAZO,GACnBW,EAAKT,OAAOA,OACNU,EAAcF,EAAIG,KAAKF,EAAM,UAC7BG,EAAYJ,EAAIG,KAAKF,EAAM,QAC3BI,EAAWL,EAAIG,KAAKF,EAAM,cAE5BI,EAAW,EACPJ,EAAKK,OAAON,EAAK,QACVC,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,GAEH,IAAbU,KACGA,EAAWT,EACdQ,EAAY,GAAKA,GAAa,MAC3BA,EAAYP,EACfK,EAAc,GAAKA,GAAe,MAC/BA,EAAcJ,EAEjBC,GAIfS,oBAAWlB,EAAmBC,YAAAA,IAAAA,EAAqB,UAK3CA,EAHAC,OAAAA,aAAS,SAGTD,EAFAE,uBAAAA,aAAyBC,KAAKR,8BAE9BK,EADAI,oBAAAA,aAAsBD,KAAKP,yBAEzBc,EAAOlB,EAAkB,IAAZO,UACnBW,EAAKT,OAAOA,GACRS,EAAKK,OAAOvB,IAAS,QACdkB,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,IAI3Bc,wBAAenB,EAAmBC,YAAAA,IAAAA,EAAqB,UACMA,EAAjDC,OAAAA,aAAS,SAAwCD,EAAlCmB,WAAAA,aAAahB,KAAKN,cACnCa,EAAOlB,EAAkB,IAAZO,UACnBW,EAAKT,OAAOA,GACLS,EAAKM,OAAOG"}
+{"version":3,"file":"time-utils.js","sources":["../../../src/components/time/time-utils.ts"],"sourcesContent":["import dayjs from 'dayjs'\n/**\n * There's a problem with our setup where the default export from\n * localizedFormat (and likely every other dayjs plugin) isn't properly\n * recognized. The proposed workarounds (importing with `.js` ending, or adding\n * `allowSyntheticDefaultImports` to the tsconfig) either broke linting or type\n * checking. After spending some time on this it was decided that further\n * investigations are not worth it, the code works and the eslint ignore is fine.\n * ref: https://github.com/iamkun/dayjs/issues/593\n * ref: https://day.js.org/docs/en/installation/typescript\n */\n// eslint-disable-next-line import/default\nimport LocalizedFormat from 'dayjs/plugin/localizedFormat'\n\ndayjs.extend(LocalizedFormat)\n\ntype TimeConfig = {\n    locale?: string\n    longFormat?: string\n    shortFormatCurrentYear?: string\n    shortFormatPastYear?: string\n    daysSuffix?: string\n    hoursSuffix?: string\n    minutesSuffix?: string\n    momentsAgo?: string\n}\n\nconst TimeUtils = {\n    SHORT_FORMAT_CURRENT_YEAR: 'L',\n    SHORT_FORMAT_PAST_YEAR: 'LL',\n    LONG_FORMAT: 'LL, LT',\n\n    timeAgo(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n            daysSuffix = 'd',\n            hoursSuffix = 'h',\n            minutesSuffix = 'm',\n            momentsAgo = 'moments ago',\n        } = config\n        const now = dayjs()\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        const diffMinutes = now.diff(date, 'minute')\n        const diffHours = now.diff(date, 'hour')\n        const diffDays = now.diff(date, 'day')\n\n        if (diffDays > 1) {\n            if (date.isSame(now, 'year')) {\n                return date.format(shortFormatCurrentYear)\n            } else {\n                return date.format(shortFormatPastYear)\n            }\n        } else if (diffDays === 1) {\n            return `${diffDays}${daysSuffix}`\n        } else if (diffHours > 0 && diffHours <= 23) {\n            return `${diffHours}${hoursSuffix}`\n        } else if (diffMinutes > 0 && diffMinutes <= 59) {\n            return `${diffMinutes}${minutesSuffix}`\n        } else {\n            return momentsAgo\n        }\n    },\n\n    formatTime(timestamp: number, config: TimeConfig = {}) {\n        const {\n            locale = 'en',\n            shortFormatCurrentYear = this.SHORT_FORMAT_CURRENT_YEAR,\n            shortFormatPastYear = this.SHORT_FORMAT_PAST_YEAR,\n        } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        if (date.isSame(dayjs(), 'year')) {\n            return date.format(shortFormatCurrentYear)\n        } else {\n            return date.format(shortFormatPastYear)\n        }\n    },\n\n    formatTimeLong(timestamp: number, config: TimeConfig = {}) {\n        const { locale = 'en', longFormat = this.LONG_FORMAT } = config\n        const date = dayjs(timestamp * 1000)\n        date.locale(locale)\n        return date.format(longFormat)\n    },\n}\n\nexport { TimeUtils, TimeConfig }\n"],"names":["dayjs","extend","LocalizedFormat","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","this","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":"iNAcAA,EAAMC,OAAOC,qBAaK,CACdC,0BAA2B,IAC3BC,uBAAwB,KACxBC,YAAa,SAEbC,QAAQC,EAAmBC,EAAqB,IAC5C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,uBAHzBS,WAIFA,EAAa,IAJXC,YAKFA,EAAc,IALZC,cAMFA,EAAgB,IANdC,WAOFA,EAAa,eACbR,EACES,EAAMjB,IACNkB,EAAOlB,EAAkB,IAAZO,GACnBW,EAAKT,OAAOA,GACZ,MAAMU,EAAcF,EAAIG,KAAKF,EAAM,UAC7BG,EAAYJ,EAAIG,KAAKF,EAAM,QAC3BI,EAAWL,EAAIG,KAAKF,EAAM,OAEhC,OAAII,EAAW,EACPJ,EAAKK,OAAON,EAAK,QACVC,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,GAEH,IAAbU,KACGA,EAAWT,EACdQ,EAAY,GAAKA,GAAa,MAC3BA,EAAYP,EACfK,EAAc,GAAKA,GAAe,MAC/BA,EAAcJ,EAEjBC,GAIfS,WAAWlB,EAAmBC,EAAqB,IAC/C,MAAMC,OACFA,EAAS,KADPC,uBAEFA,EAAyBC,KAAKR,0BAF5BS,oBAGFA,EAAsBD,KAAKP,wBAC3BI,EACEU,EAAOlB,EAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACRS,EAAKK,OAAOvB,IAAS,QACdkB,EAAKM,OAAOd,GAEZQ,EAAKM,OAAOZ,IAI3Bc,eAAenB,EAAmBC,EAAqB,IACnD,MAAMC,OAAEA,EAAS,KAAXkB,WAAiBA,EAAahB,KAAKN,aAAgBG,EACnDU,EAAOlB,EAAkB,IAAZO,GAEnB,OADAW,EAAKT,OAAOA,GACLS,EAAKM,OAAOG"}

package/lib/components/time/time.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,o=require("../tooltip/tooltip.js"),i=require("./time-utils.js"),s=function(e){function s(t){var r;return(r=e.call(this,t)||this).refreshInterval=void 0,r.state={hovered:!1,mouseX:void 0,mouseY:void 0},r}t.inheritsLoose(s,e);var n=s.prototype;return n.componentDidMount=function(){this.props.refresh&&this._refresh()},n.componentDidUpdate=function(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)},n.componentWillUnmount=function(){this.refreshInterval&&clearTimeout(this.refreshInterval)},n._setHovered=function(e,t){var r=this.state,o=t.clientX,i=t.clientY;o===r.mouseX&&i===r.mouseY||this.setState((function(){return{hovered:e,mouseX:o,mouseY:i}}))},n._renderTime=function(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return i.TimeUtils.formatTime(this.props.time,e)}return i.TimeUtils.timeAgo(this.props.time,e)}},n._refresh=function(){var e=this;this.refreshInterval=setInterval((function(){e.forceUpdate()}),6e4)},n.render=function(){var e=this,t="reactist_time";this.props.className&&(t=this.props.className);var s=this._renderTime(this.props.config);return r.createElement("time",{className:t,onMouseEnter:function(t){return e._setHovered(!0,t)},onMouseLeave:function(t){return e._setHovered(!1,t)}},this.props.tooltipOnHover?r.createElement(o.Tooltip,{content:this.props.tooltip||this.props.time&&i.TimeUtils.formatTimeLong(this.props.time,this.props.config)},r.createElement("span",null,s)):s)},s}(r.Component);s.displayName="Time",s.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e,s=require("../tooltip/tooltip.js"),r=require("./time-utils.js");class o extends t.Component{constructor(e){super(e),this.refreshInterval=void 0,this.refreshInterval=void 0,this.state={hovered:!1,mouseX:void 0,mouseY:void 0}}componentDidMount(){this.props.refresh&&this._refresh()}componentDidUpdate(e){!e.refresh&&this.props.refresh&&this._refresh(),e.refresh&&!this.props.refresh&&this.refreshInterval&&clearTimeout(this.refreshInterval)}componentWillUnmount(){this.refreshInterval&&clearTimeout(this.refreshInterval)}_setHovered(e,t){const{mouseX:s,mouseY:r}=this.state,{clientX:o,clientY:i}=t;o===s&&i===r||this.setState(()=>({hovered:e,mouseX:o,mouseY:i}))}_renderTime(e){if(this.props.time){if(this.state.hovered){if(this.props.expandFullyOnHover&&!this.props.tooltipOnHover)return r.TimeUtils.formatTimeLong(this.props.time,e);if(this.props.expandOnHover&&!this.props.tooltipOnHover)return r.TimeUtils.formatTime(this.props.time,e)}return r.TimeUtils.timeAgo(this.props.time,e)}}_refresh(){this.refreshInterval=setInterval(()=>{this.forceUpdate()},6e4)}render(){let e="reactist_time";this.props.className&&(e=this.props.className);const o=this._renderTime(this.props.config);return t.createElement("time",{className:e,onMouseEnter:e=>this._setHovered(!0,e),onMouseLeave:e=>this._setHovered(!1,e)},this.props.tooltipOnHover?t.createElement(s.Tooltip,{content:this.props.tooltip||this.props.time&&r.TimeUtils.formatTimeLong(this.props.time,this.props.config)},t.createElement("span",null,o)):o)}}o.displayName=void 0,o.defaultProps=void 0,o.displayName="Time",o.defaultProps={expandOnHover:!1,expandFullyOnHover:!1,tooltipOnHover:!1,refresh:!0,config:{locale:"en",daysSuffix:"d",hoursSuffix:"h",minutesSuffix:"m",momentsAgo:"moments ago"}},exports.Time=o;
 //# sourceMappingURL=time.js.map

package/lib/components/time/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tooltip } from '../tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","props","refreshInterval","undefined","state","hovered","mouseX","mouseY","componentDidMount","this","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","_this2","forceUpdate","render","className","timeComponent","React","onMouseEnter","_this3","onMouseLeave","Tooltip","content","tooltip","Component","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"yQAiCMA,yBAIUC,8BACFA,UACDC,qBAAkBC,IAElBC,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,qDAIhBK,kBAAA,WACQC,KAAKR,MAAMS,cACNC,cAIbC,mBAAA,SAAmBC,IACVA,EAAUH,SAAWD,KAAKR,MAAMS,cAC5BC,WAGLE,EAAUH,UAAYD,KAAKR,MAAMS,SAC7BD,KAAKP,iBACLY,aAAaL,KAAKP,oBAK9Ba,qBAAA,WACQN,KAAKP,iBACLY,aAAaL,KAAKP,oBAM1Bc,YAAA,SAAYX,EAAkBY,SACCR,KAAKL,MACxBc,EAAqBD,EAArBC,QAASC,EAAYF,EAAZE,QACbD,MAFIZ,QAEkBa,MAFVZ,aAIPa,UAAS,iBAAO,CACjBf,QAAAA,EACAC,OAAQY,EACRX,OAAQY,SAKpBE,YAAA,SAAYC,MACHb,KAAKR,MAAMsB,SAGZd,KAAKL,MAAMC,QAAS,IAChBI,KAAKR,MAAMuB,qBAAuBf,KAAKR,MAAMwB,sBACtCC,YAAUC,eAAelB,KAAKR,MAAMsB,KAAMD,MAEjDb,KAAKR,MAAM2B,gBAAkBnB,KAAKR,MAAMwB,sBACjCC,YAAUG,WAAWpB,KAAKR,MAAMsB,KAAMD,UAG9CI,YAAUI,QAAQrB,KAAKR,MAAMsB,KAAMD,OAG9CX,SAAA,2BACST,gBAAkB6B,aAAY,WAC/BC,EAAKC,gBAjGH,QAqGVC,OAAA,sBACQC,EAAY,gBACZ1B,KAAKR,MAAMkC,YACXA,EAAY1B,KAAKR,MAAMkC,eAGrBC,EAAgB3B,KAAKY,YAAYZ,KAAKR,MAAMqB,eAG9Ce,wBACIF,UAAWA,EACXG,aAAc,SAACrB,UAAUsB,EAAKvB,aAAY,EAAMC,IAChDuB,aAAc,SAACvB,UAAUsB,EAAKvB,aAAY,EAAOC,KAEhDR,KAAKR,MAAMwB,eACRY,gBAACI,WACGC,QACIjC,KAAKR,MAAM0C,SACVlC,KAAKR,MAAMsB,MACRG,YAAUC,eAAelB,KAAKR,MAAMsB,KAAMd,KAAKR,MAAMqB,SAG7De,4BAAOD,IAGXA,OApGDC,EAAMO,WA0GzB5C,EAAK6C,YAAc,OAEnB7C,EAAK8C,aAAe,CAChBlB,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJyB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}
+{"version":3,"file":"time.js","sources":["../../../src/components/time/time.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tooltip } from '../tooltip'\nimport { TimeUtils, TimeConfig } from './time-utils'\n\nimport './time.less'\n\nconst DELAY = 60000\n\ntype Props = {\n    /** UNIX timestamp of the time to display. */\n    time?: number\n    /** Configuration for localization. */\n    config?: TimeConfig\n    /** Additional css class applied to the time element. */\n    className?: string\n    tooltipOnHover?: boolean\n    /** Refresh the component every DELAY seconds. */\n    refresh?: boolean\n    /** If you don't want to use the default time format on the tooltip use this prop to supply a custom text */\n    tooltip?: React.ReactNode\n    /** When hovering over time it expands to short absolute version. */\n    expandOnHover?: boolean\n    /** When hovering over time it expands to the full absolute version. */\n    expandFullyOnHover?: boolean\n}\n\ntype State = {\n    hovered: boolean\n    mouseX?: number\n    mouseY?: number\n}\n\nclass Time extends React.Component<Props, State> {\n    public static displayName: string\n    public static defaultProps: Props\n\n    constructor(props: Props) {\n        super(props)\n        this.refreshInterval = undefined\n\n        this.state = {\n            hovered: false,\n            mouseX: undefined,\n            mouseY: undefined,\n        }\n    }\n\n    componentDidMount() {\n        if (this.props.refresh) {\n            this._refresh()\n        }\n    }\n\n    componentDidUpdate(prevProps: Props) {\n        if (!prevProps.refresh && this.props.refresh) {\n            this._refresh()\n        }\n\n        if (prevProps.refresh && !this.props.refresh) {\n            if (this.refreshInterval) {\n                clearTimeout(this.refreshInterval)\n            }\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.refreshInterval) {\n            clearTimeout(this.refreshInterval)\n        }\n    }\n\n    refreshInterval?: ReturnType<typeof setTimeout>\n\n    _setHovered(hovered: boolean, event: React.MouseEvent) {\n        const { mouseX, mouseY } = this.state\n        const { clientX, clientY } = event\n        if (clientX !== mouseX || clientY !== mouseY) {\n            // mouse has moved\n            this.setState(() => ({\n                hovered,\n                mouseX: clientX,\n                mouseY: clientY,\n            }))\n        }\n    }\n\n    _renderTime(config: Props['config']) {\n        if (!this.props.time) {\n            return\n        }\n        if (this.state.hovered) {\n            if (this.props.expandFullyOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTimeLong(this.props.time, config)\n            }\n            if (this.props.expandOnHover && !this.props.tooltipOnHover) {\n                return TimeUtils.formatTime(this.props.time, config)\n            }\n        }\n        return TimeUtils.timeAgo(this.props.time, config)\n    }\n\n    _refresh() {\n        this.refreshInterval = setInterval(() => {\n            this.forceUpdate()\n        }, DELAY)\n    }\n\n    render() {\n        let className = 'reactist_time'\n        if (this.props.className) {\n            className = this.props.className\n        }\n\n        const timeComponent = this._renderTime(this.props.config)\n\n        return (\n            <time\n                className={className}\n                onMouseEnter={(event) => this._setHovered(true, event)}\n                onMouseLeave={(event) => this._setHovered(false, event)}\n            >\n                {this.props.tooltipOnHover ? (\n                    <Tooltip\n                        content={\n                            this.props.tooltip ||\n                            (this.props.time &&\n                                TimeUtils.formatTimeLong(this.props.time, this.props.config))\n                        }\n                    >\n                        <span>{timeComponent}</span>\n                    </Tooltip>\n                ) : (\n                    timeComponent\n                )}\n            </time>\n        )\n    }\n}\nTime.displayName = 'Time'\n\nTime.defaultProps = {\n    expandOnHover: false,\n    expandFullyOnHover: false,\n    tooltipOnHover: false,\n    refresh: true,\n    config: {\n        locale: 'en',\n        daysSuffix: 'd',\n        hoursSuffix: 'h',\n        minutesSuffix: 'm',\n        momentsAgo: 'moments ago',\n    },\n}\n\nexport { Time }\n"],"names":["Time","React","Component","constructor","props","super","refreshInterval","this","undefined","state","hovered","mouseX","mouseY","componentDidMount","refresh","_refresh","componentDidUpdate","prevProps","clearTimeout","componentWillUnmount","_setHovered","event","clientX","clientY","setState","_renderTime","config","time","expandFullyOnHover","tooltipOnHover","TimeUtils","formatTimeLong","expandOnHover","formatTime","timeAgo","setInterval","forceUpdate","render","className","timeComponent","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"gNAiCA,MAAMA,UAAaC,EAAMC,UAIrBC,YAAYC,GACRC,MAAMD,QAkCVE,uBAjCIC,KAAKD,qBAAkBE,EAEvBD,KAAKE,MAAQ,CACTC,SAAS,EACTC,YAAQH,EACRI,YAAQJ,GAIhBK,oBACQN,KAAKH,MAAMU,SACXP,KAAKQ,WAIbC,mBAAmBC,IACVA,EAAUH,SAAWP,KAAKH,MAAMU,SACjCP,KAAKQ,WAGLE,EAAUH,UAAYP,KAAKH,MAAMU,SAC7BP,KAAKD,iBACLY,aAAaX,KAAKD,iBAK9Ba,uBACQZ,KAAKD,iBACLY,aAAaX,KAAKD,iBAM1Bc,YAAYV,EAAkBW,GAC1B,MAAMV,OAAEA,EAAFC,OAAUA,GAAWL,KAAKE,OAC1Ba,QAAEA,EAAFC,QAAWA,GAAYF,EACzBC,IAAYX,GAAUY,IAAYX,GAElCL,KAAKiB,SAAS,MACVd,QAAAA,EACAC,OAAQW,EACRV,OAAQW,KAKpBE,YAAYC,GACR,GAAKnB,KAAKH,MAAMuB,KAAhB,CAGA,GAAIpB,KAAKE,MAAMC,QAAS,CACpB,GAAIH,KAAKH,MAAMwB,qBAAuBrB,KAAKH,MAAMyB,eAC7C,OAAOC,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMD,GAErD,GAAInB,KAAKH,MAAM4B,gBAAkBzB,KAAKH,MAAMyB,eACxC,OAAOC,YAAUG,WAAW1B,KAAKH,MAAMuB,KAAMD,GAGrD,OAAOI,YAAUI,QAAQ3B,KAAKH,MAAMuB,KAAMD,IAG9CX,WACIR,KAAKD,gBAAkB6B,YAAY,KAC/B5B,KAAK6B,eAjGH,KAqGVC,SACI,IAAIC,EAAY,gBACZ/B,KAAKH,MAAMkC,YACXA,EAAY/B,KAAKH,MAAMkC,WAG3B,MAAMC,EAAgBhC,KAAKkB,YAAYlB,KAAKH,MAAMsB,QAElD,OACIzB,wBACIqC,UAAWA,EACXE,aAAenB,GAAUd,KAAKa,aAAY,EAAMC,GAChDoB,aAAepB,GAAUd,KAAKa,aAAY,EAAOC,IAEhDd,KAAKH,MAAMyB,eACR5B,gBAACyC,WACGC,QACIpC,KAAKH,MAAMwC,SACVrC,KAAKH,MAAMuB,MACRG,YAAUC,eAAexB,KAAKH,MAAMuB,KAAMpB,KAAKH,MAAMsB,SAG7DzB,4BAAOsC,IAGXA,IApGdvC,EACY6C,mBADZ7C,EAEY8C,oBAwGlB9C,EAAK6C,YAAc,OAEnB7C,EAAK8C,aAAe,CAChBd,eAAe,EACfJ,oBAAoB,EACpBC,gBAAgB,EAChBf,SAAS,EACTY,OAAQ,CACJqB,OAAQ,KACRC,WAAY,IACZC,YAAa,IACbC,cAAe,IACfC,WAAY"}