@doist/reactist 10.0.0-beta.10 → 10.0.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/dist/reactist.cjs.development.js +141 -71
  2. package/dist/reactist.cjs.development.js.map +1 -1
  3. package/dist/reactist.cjs.production.min.js +1 -1
  4. package/dist/reactist.cjs.production.min.js.map +1 -1
  5. package/es/_virtual/_rollupPluginBabelHelpers.js +34 -20
  6. package/es/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
  7. package/es/components/deprecated-button/deprecated-button.js +2 -1
  8. package/es/components/deprecated-button/deprecated-button.js.map +1 -1
  9. package/es/components/deprecated-modal/deprecated-modal.js +1 -1
  10. package/es/components/deprecated-modal/deprecated-modal.js.map +1 -1
  11. package/es/components/dropdown/dropdown.js +3 -1
  12. package/es/components/dropdown/dropdown.js.map +1 -1
  13. package/es/components/error-message/error-message.js +1 -1
  14. package/es/components/error-message/error-message.js.map +1 -1
  15. package/es/components/icon/icon.js.map +1 -1
  16. package/es/components/key-capturer/key-capturer.js.map +1 -1
  17. package/es/components/keyboard-shortcut/keyboard-shortcut.js +2 -1
  18. package/es/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  19. package/es/components/menu/menu.js +22 -11
  20. package/es/components/menu/menu.js.map +1 -1
  21. package/es/components/notification/notification.js +3 -1
  22. package/es/components/notification/notification.js.map +1 -1
  23. package/es/components/popover/popover.js.map +1 -1
  24. package/es/components/popover/positioning-utils.js.map +1 -1
  25. package/es/components/select/select.js +3 -1
  26. package/es/components/select/select.js.map +1 -1
  27. package/es/components/time/time-utils.js.map +1 -1
  28. package/es/components/time/time.js.map +1 -1
  29. package/es/components/tooltip/tooltip.js +3 -1
  30. package/es/components/tooltip/tooltip.js.map +1 -1
  31. package/es/new-components/base-button/base-button.js +3 -1
  32. package/es/new-components/base-button/base-button.js.map +1 -1
  33. package/es/new-components/box/box.js +2 -1
  34. package/es/new-components/box/box.js.map +1 -1
  35. package/es/new-components/button/button.js +2 -1
  36. package/es/new-components/button/button.js.map +1 -1
  37. package/es/new-components/button-link/button-link.js +2 -1
  38. package/es/new-components/button-link/button-link.js.map +1 -1
  39. package/es/new-components/checkbox-field/checkbox-field.js +2 -1
  40. package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
  41. package/es/new-components/checkbox-field/checkbox-icon.js +2 -1
  42. package/es/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  43. package/es/new-components/columns/columns.js +4 -2
  44. package/es/new-components/columns/columns.js.map +1 -1
  45. package/es/new-components/divider/divider.js +3 -1
  46. package/es/new-components/divider/divider.js.map +1 -1
  47. package/es/new-components/heading/heading.js +2 -1
  48. package/es/new-components/heading/heading.js.map +1 -1
  49. package/es/new-components/hidden/hidden.js +2 -1
  50. package/es/new-components/hidden/hidden.js.map +1 -1
  51. package/es/new-components/icons/alert-icon.js +2 -1
  52. package/es/new-components/icons/alert-icon.js.map +1 -1
  53. package/es/new-components/inline/inline.js +2 -1
  54. package/es/new-components/inline/inline.js.map +1 -1
  55. package/es/new-components/loading/loading.js +2 -1
  56. package/es/new-components/loading/loading.js.map +1 -1
  57. package/es/new-components/modal/modal.js +10 -5
  58. package/es/new-components/modal/modal.js.map +1 -1
  59. package/es/new-components/modal/modal.module.css.js +1 -1
  60. package/es/new-components/password-field/password-field.js +2 -1
  61. package/es/new-components/password-field/password-field.js.map +1 -1
  62. package/es/new-components/select-field/select-field.js +2 -1
  63. package/es/new-components/select-field/select-field.js.map +1 -1
  64. package/es/new-components/stack/stack.js +2 -1
  65. package/es/new-components/stack/stack.js.map +1 -1
  66. package/es/new-components/switch-field/switch-field.js +2 -1
  67. package/es/new-components/switch-field/switch-field.js.map +1 -1
  68. package/es/new-components/tabs/tabs.js +10 -5
  69. package/es/new-components/tabs/tabs.js.map +1 -1
  70. package/es/new-components/text/text.js +2 -1
  71. package/es/new-components/text/text.js.map +1 -1
  72. package/es/new-components/text-area/text-area.js +3 -1
  73. package/es/new-components/text-area/text-area.js.map +1 -1
  74. package/es/new-components/text-field/text-field.js +2 -1
  75. package/es/new-components/text-field/text-field.js.map +1 -1
  76. package/es/new-components/text-link/text-link.js +2 -1
  77. package/es/new-components/text-link/text-link.js.map +1 -1
  78. package/lib/_virtual/_rollupPluginBabelHelpers.js +1 -1
  79. package/lib/components/deprecated-button/deprecated-button.js +1 -1
  80. package/lib/components/deprecated-button/deprecated-button.js.map +1 -1
  81. package/lib/components/deprecated-modal/deprecated-modal.js +1 -1
  82. package/lib/components/deprecated-modal/deprecated-modal.js.map +1 -1
  83. package/lib/components/dropdown/dropdown.js +1 -1
  84. package/lib/components/dropdown/dropdown.js.map +1 -1
  85. package/lib/components/error-message/error-message.js +1 -1
  86. package/lib/components/error-message/error-message.js.map +1 -1
  87. package/lib/components/keyboard-shortcut/keyboard-shortcut.js +1 -1
  88. package/lib/components/keyboard-shortcut/keyboard-shortcut.js.map +1 -1
  89. package/lib/components/menu/menu.js +1 -1
  90. package/lib/components/menu/menu.js.map +1 -1
  91. package/lib/components/notification/notification.js +1 -1
  92. package/lib/components/notification/notification.js.map +1 -1
  93. package/lib/components/select/select.js +1 -1
  94. package/lib/components/select/select.js.map +1 -1
  95. package/lib/components/tooltip/tooltip.js +1 -1
  96. package/lib/components/tooltip/tooltip.js.map +1 -1
  97. package/lib/new-components/base-button/base-button.js +1 -1
  98. package/lib/new-components/base-button/base-button.js.map +1 -1
  99. package/lib/new-components/box/box.js +1 -1
  100. package/lib/new-components/box/box.js.map +1 -1
  101. package/lib/new-components/button/button.js +1 -1
  102. package/lib/new-components/button/button.js.map +1 -1
  103. package/lib/new-components/button-link/button-link.js +1 -1
  104. package/lib/new-components/button-link/button-link.js.map +1 -1
  105. package/lib/new-components/checkbox-field/checkbox-field.js +1 -1
  106. package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
  107. package/lib/new-components/checkbox-field/checkbox-icon.js +1 -1
  108. package/lib/new-components/checkbox-field/checkbox-icon.js.map +1 -1
  109. package/lib/new-components/columns/columns.js +1 -1
  110. package/lib/new-components/columns/columns.js.map +1 -1
  111. package/lib/new-components/divider/divider.js +1 -1
  112. package/lib/new-components/divider/divider.js.map +1 -1
  113. package/lib/new-components/heading/heading.js +1 -1
  114. package/lib/new-components/heading/heading.js.map +1 -1
  115. package/lib/new-components/hidden/hidden.js +1 -1
  116. package/lib/new-components/hidden/hidden.js.map +1 -1
  117. package/lib/new-components/icons/alert-icon.js +1 -1
  118. package/lib/new-components/icons/alert-icon.js.map +1 -1
  119. package/lib/new-components/inline/inline.js +1 -1
  120. package/lib/new-components/inline/inline.js.map +1 -1
  121. package/lib/new-components/loading/loading.js +1 -1
  122. package/lib/new-components/loading/loading.js.map +1 -1
  123. package/lib/new-components/modal/modal.d.ts +1 -1
  124. package/lib/new-components/modal/modal.js +1 -1
  125. package/lib/new-components/modal/modal.js.map +1 -1
  126. package/lib/new-components/modal/modal.module.css.js +1 -1
  127. package/lib/new-components/password-field/password-field.js +1 -1
  128. package/lib/new-components/password-field/password-field.js.map +1 -1
  129. package/lib/new-components/select-field/select-field.js +1 -1
  130. package/lib/new-components/select-field/select-field.js.map +1 -1
  131. package/lib/new-components/stack/stack.js +1 -1
  132. package/lib/new-components/stack/stack.js.map +1 -1
  133. package/lib/new-components/switch-field/switch-field.js +1 -1
  134. package/lib/new-components/switch-field/switch-field.js.map +1 -1
  135. package/lib/new-components/tabs/tabs.js +1 -1
  136. package/lib/new-components/tabs/tabs.js.map +1 -1
  137. package/lib/new-components/text/text.js +1 -1
  138. package/lib/new-components/text/text.js.map +1 -1
  139. package/lib/new-components/text-area/text-area.js +1 -1
  140. package/lib/new-components/text-area/text-area.js.map +1 -1
  141. package/lib/new-components/text-field/text-field.js +1 -1
  142. package/lib/new-components/text-field/text-field.js.map +1 -1
  143. package/lib/new-components/text-link/text-link.js +1 -1
  144. package/lib/new-components/text-link/text-link.js.map +1 -1
  145. package/package.json +9 -9
  146. package/styles/base-button.css +1 -1
  147. package/styles/color-picker.css +1 -1
  148. package/styles/deprecated-button.css +1 -1
  149. package/styles/deprecated-loading.css +1 -1
  150. package/styles/deprecated-modal.css +1 -1
  151. package/styles/dropdown.css +1 -1
  152. package/styles/loading.css +1 -1
  153. package/styles/modal.css +2 -2
  154. package/styles/modal.module.css.css +1 -1
  155. package/styles/reactist.css +5 -5
  156. package/styles/spinner.module.css.css +1 -1
  157. package/styles/tip.css +1 -1
@@ -1 +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'\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, ...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 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","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","baseId","visible","animated","animating","stopAnimation","modal","PopoverBackdrop","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","MenuGroud","label","role"],"mappings":"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"}
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'\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, ...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 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","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","BACKDROP_STYLE","width","height","position","top","left","MenuBackdrop","baseId","visible","animated","animating","stopAnimation","modal","PopoverBackdrop","style","MenuList","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","event","onSelectResult","defaultPrevented","undefined","shouldClose","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","toArray","button","list","buttonProps","MenuGroup","MenuGroud","label","role"],"mappings":"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"}
@@ -3,6 +3,8 @@ import React__default from 'react';
3
3
  import classNames from 'classnames';
4
4
  import CloseIcon from '../icons/CloseIcon.svg.js';
5
5
 
6
+ var _excluded = ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className"];
7
+
6
8
  function Notification(_ref) {
7
9
  var id = _ref.id,
8
10
  icon = _ref.icon,
@@ -15,7 +17,7 @@ function Notification(_ref) {
15
17
  _ref$closeAltText = _ref.closeAltText,
16
18
  closeAltText = _ref$closeAltText === void 0 ? 'Close' : _ref$closeAltText,
17
19
  className = _ref.className,
18
- rest = _objectWithoutPropertiesLoose(_ref, ["id", "icon", "title", "subtitle", "children", "customCloseButton", "onClick", "onClose", "closeAltText", "className"]);
20
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
19
21
 
20
22
  var titleId = title ? id + "-title" : null;
21
23
  var titleIdAttribute = titleId ? {
@@ -1 +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} & JSX.IntrinsicElements['div']\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 ...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=\"dialog\"\n className={classNames('reactist-notification', className, {\n 'reactist-notification--with-button': Boolean(onClick),\n 'reactist-notification--with-close-button': Boolean(onClose),\n })}\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":["Notification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;AAkBA,SAASA,YAAT;MACIC,UAAAA;MACAC,YAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,yBAAAA;MACAC,eAAAA;MACAC,eAAAA;+BACAC;MAAAA,8CAAe;MACfC,iBAAAA;MACGC;;AAEH,MAAMC,OAAO,GAAGT,KAAK,GAAMF,EAAN,cAAmB,IAAxC;AACA,MAAMY,gBAAgB,GAAGD,OAAO,GAAG;AAAEX,IAAAA,EAAE,EAAEW;AAAN,GAAH,GAAqB,IAArD;AACA,MAAME,UAAU,GAAGV,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;AACA,MAAMc,mBAAmB,GAAGD,UAAU,GAAG;AAAEb,IAAAA,EAAE,EAAEa;AAAN,GAAH,GAAwB,IAA9D;AACA,MAAME,SAAS,GAAGX,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;AACA,MAAMgB,kBAAkB,GAAGZ,QAAQ,GAAG;AAAEJ,IAAAA,EAAE,EAAKA,EAAL;AAAJ,GAAH,GAA6B,IAAhE;AACA,MAAMiB,cAAc,GAAGF,SAAS,GAC1B;AAAE,uBAAmBA;AAArB,GAD0B,GAE1BJ,OAAO,GACP;AAAE,uBAAmBA;AAArB,GADO,GAEP,IAJN;AAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACT,QAAf,GAA0B;AAAE,wBAAoBS;AAAtB,GAA1B,GAA+D,IAAvF;AAEA,MAAMM,mBAAmB,gBACrBC,4BAAA,MAAA;AAAKX,IAAAA,SAAS,EAAC;KAAqCO,mBAApD,EACKZ,QADL,aACKA,QADL,cACKA,QADL,gBAEQgB,4BAAA,wBAAA,MAAA,EACKlB,KAAK,gBACFkB,4BAAA,KAAA;AAAIX,IAAAA,SAAS,EAAC;KAAmCG,iBAAjD,EACKV,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLiB,4BAAA,IAAA;AAAGX,IAAAA,SAAS,EAAC;KAAsCK,oBAAnD,EACKX,QADL,CADK,GAIL,IAVR,CAFR,CADJ;AAkBA,MAAMkB,gBAAgB,gBAClBD,4BAAA,MAAA;AAAKX,IAAAA,SAAS,EAAC;GAAf,EACKR,IADL,aACKA,IADL,cACKA,IADL,GACa,IADb,EAEKkB,mBAFL,CADJ;AAOA,sBACIC,4BAAA,MAAA;AACIpB,IAAAA,EAAE,EAAEA;AACJsB,IAAAA,IAAI,EAAC;AACLb,IAAAA,SAAS,EAAEc,UAAU,CAAC,uBAAD,EAA0Bd,SAA1B,EAAqC;AACtD,4CAAsCe,OAAO,CAAClB,OAAD,CADS;AAEtD,kDAA4CkB,OAAO,CAACjB,OAAD;AAFG,KAArC;KAIjBU,gBACAC,iBACAR,KATR,EAWKJ,OAAO,gBACJc,4BAAA,SAAA;AAAQX,IAAAA,SAAS,EAAC;AAAgCH,IAAAA,OAAO,EAAEA;GAA3D,EACKe,gBADL,CADI,GAKJA,gBAhBR,EAmBKd,OAAO,gBACJa,4BAAA,SAAA;AACIX,IAAAA,SAAS,EAAC;AACVH,IAAAA,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,aAKKA,iBALL,cAKKA,iBALL,gBAK0Be,4BAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA3BR,CADJ;AA+BH;;;;"}
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} & JSX.IntrinsicElements['div']\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 ...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=\"dialog\"\n className={classNames('reactist-notification', className, {\n 'reactist-notification--with-button': Boolean(onClick),\n 'reactist-notification--with-close-button': Boolean(onClose),\n })}\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":["Notification","id","icon","title","subtitle","children","customCloseButton","onClick","onClose","closeAltText","className","rest","titleId","titleIdAttribute","subtitleId","subtitleIdAttribute","contentId","contentIdAttribute","ariaLabelledBy","ariaDescribedBy","notificationContent","React","notificationBody","role","classNames","Boolean","CloseIcon"],"mappings":";;;;;;;AAkBA,SAASA,YAAT;MACIC,UAAAA;MACAC,YAAAA;MACAC,aAAAA;MACAC,gBAAAA;MACAC,gBAAAA;MACAC,yBAAAA;MACAC,eAAAA;MACAC,eAAAA;+BACAC;MAAAA,8CAAe;MACfC,iBAAAA;MACGC;;AAEH,MAAMC,OAAO,GAAGT,KAAK,GAAMF,EAAN,cAAmB,IAAxC;AACA,MAAMY,gBAAgB,GAAGD,OAAO,GAAG;AAAEX,IAAAA,EAAE,EAAEW;AAAN,GAAH,GAAqB,IAArD;AACA,MAAME,UAAU,GAAGV,QAAQ,GAAMH,EAAN,iBAAsB,IAAjD;AACA,MAAMc,mBAAmB,GAAGD,UAAU,GAAG;AAAEb,IAAAA,EAAE,EAAEa;AAAN,GAAH,GAAwB,IAA9D;AACA,MAAME,SAAS,GAAGX,QAAQ,GAAMJ,EAAN,gBAAqB,IAA/C;AACA,MAAMgB,kBAAkB,GAAGZ,QAAQ,GAAG;AAAEJ,IAAAA,EAAE,EAAKA,EAAL;AAAJ,GAAH,GAA6B,IAAhE;AACA,MAAMiB,cAAc,GAAGF,SAAS,GAC1B;AAAE,uBAAmBA;AAArB,GAD0B,GAE1BJ,OAAO,GACP;AAAE,uBAAmBA;AAArB,GADO,GAEP,IAJN;AAKA,MAAMO,eAAe,GAAGL,UAAU,IAAI,CAACT,QAAf,GAA0B;AAAE,wBAAoBS;AAAtB,GAA1B,GAA+D,IAAvF;AAEA,MAAMM,mBAAmB,gBACrBC,4BAAA,MAAA;AAAKX,IAAAA,SAAS,EAAC;KAAqCO,mBAApD,EACKZ,QADL,aACKA,QADL,cACKA,QADL,gBAEQgB,4BAAA,wBAAA,MAAA,EACKlB,KAAK,gBACFkB,4BAAA,KAAA;AAAIX,IAAAA,SAAS,EAAC;KAAmCG,iBAAjD,EACKV,KADL,CADE,GAIF,IALR,EAMKC,QAAQ,gBACLiB,4BAAA,IAAA;AAAGX,IAAAA,SAAS,EAAC;KAAsCK,oBAAnD,EACKX,QADL,CADK,GAIL,IAVR,CAFR,CADJ;AAkBA,MAAMkB,gBAAgB,gBAClBD,4BAAA,MAAA;AAAKX,IAAAA,SAAS,EAAC;GAAf,EACKR,IADL,aACKA,IADL,cACKA,IADL,GACa,IADb,EAEKkB,mBAFL,CADJ;AAOA,sBACIC,4BAAA,MAAA;AACIpB,IAAAA,EAAE,EAAEA;AACJsB,IAAAA,IAAI,EAAC;AACLb,IAAAA,SAAS,EAAEc,UAAU,CAAC,uBAAD,EAA0Bd,SAA1B,EAAqC;AACtD,4CAAsCe,OAAO,CAAClB,OAAD,CADS;AAEtD,kDAA4CkB,OAAO,CAACjB,OAAD;AAFG,KAArC;KAIjBU,gBACAC,iBACAR,KATR,EAWKJ,OAAO,gBACJc,4BAAA,SAAA;AAAQX,IAAAA,SAAS,EAAC;AAAgCH,IAAAA,OAAO,EAAEA;GAA3D,EACKe,gBADL,CADI,GAKJA,gBAhBR,EAmBKd,OAAO,gBACJa,4BAAA,SAAA;AACIX,IAAAA,SAAS,EAAC;AACVH,IAAAA,OAAO,EAAEC;kBACGC;GAHhB,EAKKH,iBALL,aAKKA,iBALL,cAKKA,iBALL,gBAK0Be,4BAAA,CAACK,SAAD,MAAA,CAL1B,CADI,GAQJ,IA3BR,CADJ;AA+BH;;;;"}
@@ -1 +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","props","position","allowVaguePositioning","gapSize","wrapperRect","wrapper","getBoundingClientRect","popoverRect","popover","documentEl","document","documentElement","node","foundParent","styles","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","enoughSpaceAtPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","popoverRef","wrapperRef","componentDidMount","_updatePopoverPosition","componentDidUpdate","prevProps","positionChanged","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","React","Children","only","handleTriggerClick","event","ref","_updateWrapperRef","cloneElement","_updatePopoverRef","Component","displayName","defaultProps"],"mappings":"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"}
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","props","position","allowVaguePositioning","gapSize","wrapperRect","wrapper","getBoundingClientRect","popoverRect","popover","documentEl","document","documentElement","node","foundParent","styles","getComputedStyle","getPropertyValue","parentElement","nodeRect","windowDimensions","height","width","popoverDimensions","wrapperDimensions","wrapperPositionRelative","x","left","y","top","wrapperPositionAbsolute","positionsToTry","index","length","currentPosition","enoughSpaceAtPosition","hasEnoughSpace","popoverPosition","calculatePosition","style","className","_getClassNameForPosition","visible","withArrow","arrowClassName","classNames","arrow_top","arrow_right","arrow_bottom","arrow_left","popoverRef","wrapperRef","componentDidMount","_updatePopoverPosition","componentDidUpdate","prevProps","positionChanged","vaguePositioningChanged","visibilityChanged","arrowChanged","gapSizeChanged","contentChanged","content","render","wrapperClassName","popoverClassName","onMouseEnter","onMouseLeave","onClick","trigger","popoverClass","popoverContentClass","wrapperClass","triggerElement","React","Children","only","handleTriggerClick","event","ref","_updateWrapperRef","cloneElement","_updatePopoverRef","Component","displayName","defaultProps"],"mappings":"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"}
@@ -1 +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":["hasEnoughSpace","windowDimensions","elementDimensions","wrapperDimensions","wrapperPosition","position","gap","windowHeight","height","windowWidth","width","elementHeight","elementWidth","wrapperHeight","wrapperWidth","wrapperX","x","wrapperY","y","verticalPosition","_calculateVerticalPosition","horizontalPosition","_calculateHorizontalPosition","canPlaceVertically","canPlaceHorizontally","calculateTopCenterPosition","calculateBottomCenterPosition","calculateRightCenterPosition","calculateLeftCenterPosition","calculatePosition"],"mappings":"IAaMA,cAAc,GAAqB,SAAnCA,cAAmC,CACrCC,gBADqC,EAErCC,iBAFqC,EAGrCC,iBAHqC,EAIrCC,eAJqC,EAKrCC,QALqC,EAMrCC,GANqC;MAMrCA;AAAAA,IAAAA,MAAM;;;MAEUC,eAAqCN,iBAA7CO;MAA6BC,cAAgBR,iBAAvBS;MACdC,gBAAuCT,kBAA/CM;MAA8BI,eAAiBV,kBAAxBQ;MACfG,gBAAuCV,kBAA/CK;MAA8BM,eAAiBX,kBAAxBO;MACpBK,WAA0BX,gBAA7BY;MAAgBC,WAAab,gBAAhBc;;AAErB,MAAMC,gBAAgB,GAAGC,0BAA0B,CAC/ChB,eAD+C,EAE/CD,iBAF+C,EAG/CD,iBAH+C,CAAnD;;AAKA,MAAMmB,kBAAkB,GAAGC,4BAA4B,CACnDlB,eADmD,EAEnDD,iBAFmD,EAGnDD,iBAHmD,CAAvD;;AAKA,MAAMqB,kBAAkB,GACpBJ,gBAAgB,IAAI,CAApB,IAAyBA,gBAAgB,GAAGP,YAAnB,IAAmCH,WADhE;AAEA,MAAMe,oBAAoB,GACtBH,kBAAkB,IAAI,CAAtB,IAA2BA,kBAAkB,GAAGV,aAArB,IAAsCJ,YADrE;;AAGA,MAAIF,QAAQ,KAAK,KAAjB,EAAwB;AACpB,WAAOkB,kBAAkB,IAAIN,QAAQ,GAAGN,aAAX,GAA2BL,GAA3B,IAAkC,CAA/D;AACH,GAFD,MAEO,IAAID,QAAQ,KAAK,OAAjB,EAA0B;AAC7B,WAAOmB,oBAAoB,IAAIT,QAAQ,GAAGD,YAAX,GAA0BF,YAA1B,GAAyCN,GAAzC,IAAgDG,WAA/E;AACH,GAFM,MAEA,IAAIJ,QAAQ,KAAK,MAAjB,EAAyB;AAC5B,WAAOmB,oBAAoB,IAAIT,QAAQ,GAAGH,YAAX,GAA0BN,GAA1B,IAAiC,CAAhE;AACH,GAFM,MAEA,IAAID,QAAQ,KAAK,QAAjB,EAA2B;AAC9B,WAAOkB,kBAAkB,IAAIN,QAAQ,GAAGJ,aAAX,GAA2BF,aAA3B,GAA2CL,GAA3C,IAAkDC,YAA/E;AACH;;AACD,SAAO,KAAP;AACH;;AAQD,IAAMa,0BAA0B,GAAiC,SAA3DA,0BAA2D,CAC7DhB,eAD6D,EAE7DD,iBAF6D,EAG7DD,iBAH6D;AAK7D,SAAOE,eAAe,CAACY,CAAhB,GAAoB,CAACb,iBAAiB,CAACO,KAAlB,GAA0BR,iBAAiB,CAACQ,KAA7C,IAAsD,CAAjF;AACH,CAND;;AAQA,IAAMY,4BAA4B,GAAiC,SAA7DA,4BAA6D,CAC/DlB,eAD+D,EAE/DD,iBAF+D,EAG/DD,iBAH+D;AAK/D,SAAOE,eAAe,CAACc,CAAhB,GAAoB,CAACf,iBAAiB,CAACK,MAAlB,GAA2BN,iBAAiB,CAACM,MAA9C,IAAwD,CAAnF;AACH,CAND;;IAeMiB,0BAA0B,GAAqB,SAA/CA,0BAA+C,CACjDtB,iBADiD,EAEjDC,eAFiD,EAGjDF,iBAHiD,EAIjDI,GAJiD;MAIjDA;AAAAA,IAAAA,MAAM;;;AAEN,MAAMU,CAAC,GAAGI,0BAA0B,CAAChB,eAAD,EAAkBD,iBAAlB,EAAqCD,iBAArC,CAApC;;AACA,MAAMgB,CAAC,GAAGd,eAAe,CAACc,CAAhB,GAAoBhB,iBAAiB,CAACM,MAAtC,GAA+CF,GAAzD;AACA,SAAO;AAAEU,IAAAA,CAAC,EAADA,CAAF;AAAKE,IAAAA,CAAC,EAADA;AAAL,GAAP;AACH;;IAEKQ,6BAA6B,GAAqB,SAAlDA,6BAAkD,CACpDvB,iBADoD,EAEpDC,eAFoD,EAGpDF,iBAHoD,EAIpDI,GAJoD;MAIpDA;AAAAA,IAAAA,MAAM;;;AAEN,MAAMU,CAAC,GAAGI,0BAA0B,CAAChB,eAAD,EAAkBD,iBAAlB,EAAqCD,iBAArC,CAApC;;AACA,MAAMgB,CAAC,GAAGd,eAAe,CAACc,CAAhB,GAAoBf,iBAAiB,CAACK,MAAtC,GAA+CF,GAAzD;AACA,SAAO;AAAEU,IAAAA,CAAC,EAADA,CAAF;AAAKE,IAAAA,CAAC,EAADA;AAAL,GAAP;AACH;;IAEKS,4BAA4B,GAAqB,SAAjDA,4BAAiD,CACnDxB,iBADmD,EAEnDC,eAFmD,EAGnDF,iBAHmD,EAInDI,GAJmD;MAInDA;AAAAA,IAAAA,MAAM;;;AAEN,MAAMU,CAAC,GAAGZ,eAAe,CAACY,CAAhB,GAAoBb,iBAAiB,CAACO,KAAtC,GAA8CJ,GAAxD;;AACA,MAAMY,CAAC,GAAGI,4BAA4B,CAAClB,eAAD,EAAkBD,iBAAlB,EAAqCD,iBAArC,CAAtC;;AACA,SAAO;AAAEc,IAAAA,CAAC,EAADA,CAAF;AAAKE,IAAAA,CAAC,EAADA;AAAL,GAAP;AACH;;IAEKU,2BAA2B,GAAqB,SAAhDA,2BAAgD,CAClDzB,iBADkD,EAElDC,eAFkD,EAGlDF,iBAHkD,EAIlDI,GAJkD;MAIlDA;AAAAA,IAAAA,MAAM;;;AAEN,MAAMU,CAAC,GAAGZ,eAAe,CAACY,CAAhB,GAAoBd,iBAAiB,CAACQ,KAAtC,GAA8CJ,GAAxD;;AACA,MAAMY,CAAC,GAAGI,4BAA4B,CAAClB,eAAD,EAAkBD,iBAAlB,EAAqCD,iBAArC,CAAtC;;AACA,SAAO;AAAEc,IAAAA,CAAC,EAADA,CAAF;AAAKE,IAAAA,CAAC,EAADA;AAAL,GAAP;AACH;;IAUKW,iBAAiB,GAAe,SAAhCA,iBAAgC,CAClCxB,QADkC,EAElCF,iBAFkC,EAGlCC,eAHkC,EAIlCF,iBAJkC,EAKlCI,GALkC;MAKlCA;AAAAA,IAAAA,MAAM;;;AAEN,MAAID,QAAQ,KAAK,KAAjB,EAAwB;AACpB,WAAOoB,0BAA0B,CAC7BtB,iBAD6B,EAE7BC,eAF6B,EAG7BF,iBAH6B,EAI7BI,GAJ6B,CAAjC;AAMH,GAPD,MAOO,IAAID,QAAQ,KAAK,OAAjB,EAA0B;AAC7B,WAAOsB,4BAA4B,CAC/BxB,iBAD+B,EAE/BC,eAF+B,EAG/BF,iBAH+B,EAI/BI,GAJ+B,CAAnC;AAMH,GAPM,MAOA,IAAID,QAAQ,KAAK,QAAjB,EAA2B;AAC9B,WAAOqB,6BAA6B,CAChCvB,iBADgC,EAEhCC,eAFgC,EAGhCF,iBAHgC,EAIhCI,GAJgC,CAApC;AAMH,GAPM,MAOA,IAAID,QAAQ,KAAK,MAAjB,EAAyB;AAC5B,WAAOuB,2BAA2B,CAC9BzB,iBAD8B,EAE9BC,eAF8B,EAG9BF,iBAH8B,EAI9BI,GAJ8B,CAAlC;AAMH;;AACD,SAAOF,eAAP;AACH;;;;"}
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":["hasEnoughSpace","windowDimensions","elementDimensions","wrapperDimensions","wrapperPosition","position","gap","windowHeight","height","windowWidth","width","elementHeight","elementWidth","wrapperHeight","wrapperWidth","wrapperX","x","wrapperY","y","verticalPosition","_calculateVerticalPosition","horizontalPosition","_calculateHorizontalPosition","canPlaceVertically","canPlaceHorizontally","calculateTopCenterPosition","calculateBottomCenterPosition","calculateRightCenterPosition","calculateLeftCenterPosition","calculatePosition"],"mappings":"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"}
@@ -2,6 +2,8 @@ import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '.
2
2
  import React__default from 'react';
3
3
  import classNames from 'classnames';
4
4
 
5
+ var _excluded = ["value", "options", "onChange", "disabled", "className", "defaultValue"];
6
+
5
7
  function Select(_ref) {
6
8
  var value = _ref.value,
7
9
  _ref$options = _ref.options,
@@ -12,7 +14,7 @@ function Select(_ref) {
12
14
  _ref$className = _ref.className,
13
15
  className = _ref$className === void 0 ? '' : _ref$className,
14
16
  defaultValue = _ref.defaultValue,
15
- otherProps = _objectWithoutPropertiesLoose(_ref, ["value", "options", "onChange", "disabled", "className", "defaultValue"]);
17
+ otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
16
18
 
17
19
  var selectClassName = classNames('reactist_select', {
18
20
  disabled: disabled
@@ -1 +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":";;;;AA6BA,SAASA,MAAT;MACIC,aAAAA;0BACAC;MAAAA,oCAAU;MACVC,iBAAAA;2BACAC;MAAAA,sCAAW;4BACXC;MAAAA,wCAAY;MACZC,oBAAAA;MACGC;;AAEH,MAAMC,eAAe,GAAGC,UAAU,CAAC,iBAAD,EAAoB;AAAEL,IAAAA,QAAQ,EAARA;AAAF,GAApB,EAAkCC,SAAlC,CAAlC;AACA,sBACIK,4BAAA,SAAA;AACIL,IAAAA,SAAS,EAAEG;AACXP,IAAAA,KAAK,EAAEA;AACPE,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAYR,SAAQ,GAAGA,SAAQ,CAACQ,KAAK,CAACC,MAAN,CAAaX,KAAd,CAAX,GAAkCY,SAAtD;AAAA;AACVT,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,YAAY,EAAEA;KACVC,WANR,EAQKL,OARL,aAQKA,OARL,uBAQKA,OAAO,CAAEY,GAAT,CAAa,UAACC,MAAD;AAAA,wBACVL,4BAAA,SAAA;AACIM,MAAAA,GAAG,EAAED,MAAM,CAACC,GAAP,IAAcD,MAAM,CAACd;AAC1BA,MAAAA,KAAK,EAAEc,MAAM,CAACd;AACdG,MAAAA,QAAQ,EAAEW,MAAM,CAACX;KAHrB,EAKKW,MAAM,CAACE,IALZ,CADU;AAAA,GAAb,CARL,CADJ;AAoBH;;AACDjB,MAAM,CAACkB,WAAP,GAAqB,QAArB;AACAlB,MAAM,CAACmB,YAAP,GAAsB;AAClBjB,EAAAA,OAAO,EAAE,EADS;AAElBE,EAAAA,QAAQ,EAAE;AAFQ,CAAtB;;;;"}
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":";;;;;;AA6BA,SAASA,MAAT;MACIC,aAAAA;0BACAC;MAAAA,oCAAU;MACVC,iBAAAA;2BACAC;MAAAA,sCAAW;4BACXC;MAAAA,wCAAY;MACZC,oBAAAA;MACGC;;AAEH,MAAMC,eAAe,GAAGC,UAAU,CAAC,iBAAD,EAAoB;AAAEL,IAAAA,QAAQ,EAARA;AAAF,GAApB,EAAkCC,SAAlC,CAAlC;AACA,sBACIK,4BAAA,SAAA;AACIL,IAAAA,SAAS,EAAEG;AACXP,IAAAA,KAAK,EAAEA;AACPE,IAAAA,QAAQ,EAAE,kBAACQ,KAAD;AAAA,aAAYR,SAAQ,GAAGA,SAAQ,CAACQ,KAAK,CAACC,MAAN,CAAaX,KAAd,CAAX,GAAkCY,SAAtD;AAAA;AACVT,IAAAA,QAAQ,EAAEA;AACVE,IAAAA,YAAY,EAAEA;KACVC,WANR,EAQKL,OARL,aAQKA,OARL,uBAQKA,OAAO,CAAEY,GAAT,CAAa,UAACC,MAAD;AAAA,wBACVL,4BAAA,SAAA;AACIM,MAAAA,GAAG,EAAED,MAAM,CAACC,GAAP,IAAcD,MAAM,CAACd;AAC1BA,MAAAA,KAAK,EAAEc,MAAM,CAACd;AACdG,MAAAA,QAAQ,EAAEW,MAAM,CAACX;KAHrB,EAKKW,MAAM,CAACE,IALZ,CADU;AAAA,GAAb,CARL,CADJ;AAoBH;;AACDjB,MAAM,CAACkB,WAAP,GAAqB,QAArB;AACAlB,MAAM,CAACmB,YAAP,GAAsB;AAClBjB,EAAAA,OAAO,EAAE,EADS;AAElBE,EAAAA,QAAQ,EAAE;AAFQ,CAAtB;;;;"}
@@ -1 +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","TimeUtils","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":";;;AAcAA,KAAK,CAACC,MAAN,CAAaC,eAAb;IAaMC,SAAS,GAAG;AACdC,EAAAA,yBAAyB,EAAE,GADb;AAEdC,EAAAA,sBAAsB,EAAE,IAFV;AAGdC,EAAAA,WAAW,EAAE,QAHC;AAKdC,EAAAA,OALc,mBAKNC,SALM,EAKaC,MALb;QAKaA;AAAAA,MAAAA,SAAqB;;;kBASxCA;iCAPAC;QAAAA,qCAAS;wCACTC;QAAAA,4DAAyB,KAAKP;wCAC9BQ;QAAAA,yDAAsB,KAAKP;qCAC3BQ;QAAAA,6CAAa;sCACbC;QAAAA,+CAAc;wCACdC;QAAAA,mDAAgB;qCAChBC;QAAAA,6CAAa;AAEjB,QAAMC,GAAG,GAAGjB,KAAK,EAAjB;AACA,QAAMkB,IAAI,GAAGlB,KAAK,CAACQ,SAAS,GAAG,IAAb,CAAlB;AACAU,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACA,QAAMS,WAAW,GAAGF,GAAG,CAACG,IAAJ,CAASF,IAAT,EAAe,QAAf,CAApB;AACA,QAAMG,SAAS,GAAGJ,GAAG,CAACG,IAAJ,CAASF,IAAT,EAAe,MAAf,CAAlB;AACA,QAAMI,QAAQ,GAAGL,GAAG,CAACG,IAAJ,CAASF,IAAT,EAAe,KAAf,CAAjB;;AAEA,QAAII,QAAQ,GAAG,CAAf,EAAkB;AACd,UAAIJ,IAAI,CAACK,MAAL,CAAYN,GAAZ,EAAiB,MAAjB,CAAJ,EAA8B;AAC1B,eAAOC,IAAI,CAACM,MAAL,CAAYb,sBAAZ,CAAP;AACH,OAFD,MAEO;AACH,eAAOO,IAAI,CAACM,MAAL,CAAYZ,mBAAZ,CAAP;AACH;AACJ,KAND,MAMO,IAAIU,QAAQ,KAAK,CAAjB,EAAoB;AACvB,kBAAUA,QAAV,GAAqBT,UAArB;AACH,KAFM,MAEA,IAAIQ,SAAS,GAAG,CAAZ,IAAiBA,SAAS,IAAI,EAAlC,EAAsC;AACzC,kBAAUA,SAAV,GAAsBP,WAAtB;AACH,KAFM,MAEA,IAAIK,WAAW,GAAG,CAAd,IAAmBA,WAAW,IAAI,EAAtC,EAA0C;AAC7C,kBAAUA,WAAV,GAAwBJ,aAAxB;AACH,KAFM,MAEA;AACH,aAAOC,UAAP;AACH;AACJ,GArCa;AAuCdS,EAAAA,UAvCc,sBAuCHjB,SAvCG,EAuCgBC,MAvChB;QAuCgBA;AAAAA,MAAAA,SAAqB;;;mBAK3CA;mCAHAC;QAAAA,sCAAS;yCACTC;QAAAA,4DAAyB,KAAKP;yCAC9BQ;QAAAA,yDAAsB,KAAKP;AAE/B,QAAMa,IAAI,GAAGlB,KAAK,CAACQ,SAAS,GAAG,IAAb,CAAlB;AACAU,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;;AACA,QAAIQ,IAAI,CAACK,MAAL,CAAYvB,KAAK,EAAjB,EAAqB,MAArB,CAAJ,EAAkC;AAC9B,aAAOkB,IAAI,CAACM,MAAL,CAAYb,sBAAZ,CAAP;AACH,KAFD,MAEO;AACH,aAAOO,IAAI,CAACM,MAAL,CAAYZ,mBAAZ,CAAP;AACH;AACJ,GApDa;AAsDdc,EAAAA,cAtDc,0BAsDClB,SAtDD,EAsDoBC,MAtDpB;QAsDoBA;AAAAA,MAAAA,SAAqB;;;mBACMA;mCAAjDC;QAAAA,sCAAS;uCAAMiB;QAAAA,8CAAa,KAAKrB;AACzC,QAAMY,IAAI,GAAGlB,KAAK,CAACQ,SAAS,GAAG,IAAb,CAAlB;AACAU,IAAAA,IAAI,CAACR,MAAL,CAAYA,MAAZ;AACA,WAAOQ,IAAI,CAACM,MAAL,CAAYG,UAAZ,CAAP;AACH;AA3Da;;;;"}
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","TimeUtils","SHORT_FORMAT_CURRENT_YEAR","SHORT_FORMAT_PAST_YEAR","LONG_FORMAT","timeAgo","timestamp","config","locale","shortFormatCurrentYear","shortFormatPastYear","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo","now","date","diffMinutes","diff","diffHours","diffDays","isSame","format","formatTime","formatTimeLong","longFormat"],"mappings":"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"}
@@ -1 +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":["DELAY","Time","props","refreshInterval","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","React","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","Component","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"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"}
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":["DELAY","Time","props","refreshInterval","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","React","onMouseEnter","onMouseLeave","Tooltip","content","tooltip","Component","displayName","defaultProps","locale","daysSuffix","hoursSuffix","minutesSuffix","momentsAgo"],"mappings":"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"}
@@ -3,6 +3,8 @@ import React__default from 'react';
3
3
  import classNames from 'classnames';
4
4
  import { TooltipReference, Tooltip as Tooltip$1, useTooltipState } from 'reakit/Tooltip';
5
5
 
6
+ var _excluded = ["children", "content", "position", "gapSize", "className"];
7
+
6
8
  var SHOW_DELAY = 500;
7
9
  var HIDE_DELAY = 100;
8
10
 
@@ -29,7 +31,7 @@ function Tooltip(_ref) {
29
31
  _ref$gapSize = _ref.gapSize,
30
32
  gapSize = _ref$gapSize === void 0 ? 3 : _ref$gapSize,
31
33
  className = _ref.className,
32
- props = _objectWithoutPropertiesLoose(_ref, ["children", "content", "position", "gapSize", "className"]);
34
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
33
35
 
34
36
  var tooltip = useDelayedTooltipState({
35
37
  placement: position,
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState,\n TooltipInitialState,\n Tooltip as ReakitTooltip,\n TooltipReference,\n TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\n children: React.ReactNode\n content: React.ReactNode | (() => React.ReactNode)\n position?: PopoverState['placement']\n gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: TooltipInitialState) {\n const tooltipState = useTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n className,\n ...props\n}: TooltipProps) {\n const tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n if (!content) {\n return child\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/reakit/reakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent) {\n // If focus is not followed by a key up event, does it mean that it's not\n // an intentional keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of reakit:\n // https://github.com/reakit/reakit/issues/750\n function handleKeyUp(e: Event) {\n const eventKey = (e as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n tooltip.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n // Prevent tooltip.show from being called by TooltipReference\n event.preventDefault()\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n }\n\n return (\n <>\n <TooltipReference\n {...tooltip}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n ref={(child as any).ref}\n {...child.props}\n onFocus={handleFocus}\n >\n {(referenceProps) => React.cloneElement(child, referenceProps)}\n </TooltipReference>\n {tooltip.visible ? (\n <ReakitTooltip\n {...tooltip}\n {...props}\n className={classNames('reactist_tooltip', className)}\n >\n {typeof content === 'function' ? content() : content}\n </ReakitTooltip>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","tooltip","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipReference","ref","referenceProps","cloneElement","visible","ReakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}
1
+ {"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport {\n useTooltipState,\n TooltipInitialState,\n Tooltip as ReakitTooltip,\n TooltipReference,\n TooltipProps as ReakitTooltipProps,\n} from 'reakit/Tooltip'\nimport { PopoverState } from 'reakit/Popover'\n\nimport './tooltip.less'\n\ntype TooltipProps = Omit<ReakitTooltipProps, 'children'> & {\n children: React.ReactNode\n content: React.ReactNode | (() => React.ReactNode)\n position?: PopoverState['placement']\n gapSize?: number\n}\n\n// These are exported to be used in the tests, they are not meant to be exported publicly\nexport const SHOW_DELAY = 500\nexport const HIDE_DELAY = 100\n\nfunction useDelayedTooltipState(initialState: TooltipInitialState) {\n const tooltipState = useTooltipState(initialState)\n const delay = useDelay()\n return React.useMemo(\n () => ({\n ...tooltipState,\n show: delay(() => tooltipState.show(), SHOW_DELAY),\n hide: delay(() => tooltipState.hide(), HIDE_DELAY),\n }),\n [delay, tooltipState],\n )\n}\n\nfunction Tooltip({\n children,\n content,\n position = 'top',\n gapSize = 3,\n className,\n ...props\n}: TooltipProps) {\n const tooltip = useDelayedTooltipState({ placement: position, gutter: gapSize })\n\n const child = React.Children.only<React.ReactElement>(children as React.ReactElement)\n if (!content) {\n return child\n }\n\n /**\n * Prevents the tooltip from automatically firing on focus all the time. This is to prevent\n * tooltips from showing when the trigger element is focused back after a popover or dialog that\n * it opened was closed. See link below for more details.\n * @see https://github.com/reakit/reakit/discussions/749\n */\n function handleFocus(event: React.FocusEvent) {\n // If focus is not followed by a key up event, does it mean that it's not\n // an intentional keyboard focus? Not sure but it seems to work.\n // This may be resolved soon in an upcoming version of reakit:\n // https://github.com/reakit/reakit/issues/750\n function handleKeyUp(e: Event) {\n const eventKey = (e as KeyboardEvent).key\n if (eventKey !== 'Escape' && eventKey !== 'Enter' && eventKey !== 'Space') {\n tooltip.show()\n }\n }\n event.currentTarget.addEventListener('keyup', handleKeyUp, { once: true })\n // Prevent tooltip.show from being called by TooltipReference\n event.preventDefault()\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access\n if (typeof child.props.onFocus === 'function') child.props.onFocus(event)\n }\n\n return (\n <>\n <TooltipReference\n {...tooltip}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n ref={(child as any).ref}\n {...child.props}\n onFocus={handleFocus}\n >\n {(referenceProps) => React.cloneElement(child, referenceProps)}\n </TooltipReference>\n {tooltip.visible ? (\n <ReakitTooltip\n {...tooltip}\n {...props}\n className={classNames('reactist_tooltip', className)}\n >\n {typeof content === 'function' ? content() : content}\n </ReakitTooltip>\n ) : null}\n </>\n )\n}\n\nexport type { TooltipProps }\nexport { Tooltip }\n\n//\n// Internal helpers\n//\n\n/**\n * Returns a function offering the same interface as setTimeout, but cleans up on unmount.\n *\n * The timeout state is shared, and only one delayed function can be active at any given time. If\n * a new delayed function is called while another one was waiting for its time to run, that older\n * invocation is cleared and it never runs.\n *\n * This is suitable for our use case here, but probably not the most intuitive thing in general.\n * That's why this is not made a shared util or something like it.\n */\nfunction useDelay() {\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n const clearTimeouts = React.useCallback(function clearTimeouts() {\n if (timeoutRef.current != null) {\n clearTimeout(timeoutRef.current)\n }\n }, [])\n\n // Runs clearTimeouts when the component is unmounted\n React.useEffect(() => clearTimeouts, [clearTimeouts])\n\n return React.useCallback(\n function delay(fn: () => void, delay: number) {\n return () => {\n clearTimeouts()\n timeoutRef.current = setTimeout(fn, delay)\n }\n },\n [clearTimeouts],\n )\n}\n"],"names":["SHOW_DELAY","HIDE_DELAY","useDelayedTooltipState","initialState","tooltipState","useTooltipState","delay","useDelay","React","useMemo","show","hide","Tooltip","children","content","position","gapSize","className","props","tooltip","placement","gutter","child","Children","only","handleFocus","event","handleKeyUp","e","eventKey","key","currentTarget","addEventListener","once","preventDefault","onFocus","TooltipReference","ref","referenceProps","cloneElement","visible","ReakitTooltip","classNames","timeoutRef","useRef","clearTimeouts","useCallback","current","clearTimeout","useEffect","fn","setTimeout"],"mappings":"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"}
@@ -6,6 +6,8 @@ import { Spinner } from '../spinner/spinner.js';
6
6
  import { Tooltip } from '../../components/tooltip/tooltip.js';
7
7
  import styles from './base-button.module.css.js';
8
8
 
9
+ var _excluded = ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"];
10
+
9
11
  function preventDefault(event) {
10
12
  event.preventDefault();
11
13
  }
@@ -39,7 +41,7 @@ var BaseButton = /*#__PURE__*/polymorphicComponent(function BaseButton(_ref, ref
39
41
  startIcon = _ref.startIcon,
40
42
  endIcon = _ref.endIcon,
41
43
  icon = _ref.icon,
42
- props = _objectWithoutPropertiesLoose(_ref, ["as", "variant", "tone", "size", "disabled", "loading", "tooltip", "onClick", "exceptionallySetClassName", "children", "startIcon", "endIcon", "icon"]);
44
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
43
45
 
44
46
  var isDisabled = loading || disabled;
45
47
  var buttonElement = /*#__PURE__*/createElement(Box, Object.assign({}, props, {
@@ -1 +1 @@
1
- {"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? <span className={styles.label}>{children}</span> : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;AACIA,EAAAA,KAAK,CAACD,cAAN;AACH;AA2DD;;;;;;;;;;;IASaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAiBnEE,GAjBmE;qBAE/DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;0BACXC;MAAAA,oCAAU;MACVC,eAAAA;MACAC,eAAAA;MACAC,iCAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,YAAAA;MACGC;;AAIP,MAAMC,UAAU,GAAGT,OAAO,IAAID,QAA9B;AACA,MAAMW,aAAa,gBACfC,aAAA,CAACC,GAAD,oBACQJ;AACJb,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;qBACUe;AACfP,IAAAA,OAAO,EAAEO,UAAU,GAAGnB,cAAH,GAAoBY;AACvCW,IAAAA,SAAS,EAAE,CACPV,yBADO,EAEPW,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYlB,OAAZ,CAHC,EAIPkB,MAAM,WAASjB,IAAT,CAJC,EAKPiB,MAAM,WAAShB,IAAT,CALC,EAMPS,IAAI,GAAGO,MAAM,CAACE,UAAV,GAAuB,IANpB,EAOPjB,QAAQ,GAAGe,MAAM,CAACf,QAAV,GAAqB,IAPtB;IANf,EAgBKQ,IAAI,GACAP,OAAO,iBAAIW,aAAA,CAACM,OAAD,MAAA,CAAZ,IAA4BV,IAD3B,gBAGDI,aAAA,SAAA,MAAA,EACKN,SAAS,gBACNM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACT;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBK,aAAA,CAACM,OAAD,MAAA,CAAtB,GAAoCZ,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBAAGO,aAAA,OAAA;AAAME,IAAAA,SAAS,EAAEC,MAAM,CAACK;GAAxB,EAAgCf,QAAhC,CAAH,GAAsD,IANnE,EAOKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACR;;GAAtC,EACKN,OAAO,gBAAGW,aAAA,CAACM,OAAD,MAAA,CAAH,GAAiBX,OAD7B,CADH,GAIG,IAXR,CAnBR,CADJ;;AAsCA,MAAMc,cAAc,GAAGb,IAAI,GAAGN,OAAH,aAAGA,OAAH,cAAGA,OAAH,GAAcO,KAAK,CAAC,YAAD,CAAnB,GAAoCP,OAA/D;AACA,SAAOmB,cAAc,gBACjBT,aAAA,CAACU,OAAD;AAASC,IAAAA,OAAO,EAAEF;GAAlB,EAAmCV,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CAhE6C;;;;"}
1
+ {"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n /**\n * The button's variant.\n */\n variant: ButtonVariant\n /**\n * The button's tone.\n * @default 'normal'\n */\n tone?: ButtonTone\n /**\n * The button's size.\n * @default 'normal'\n */\n size?: ButtonSize\n /**\n * Whether the button is disabled or not.\n * @default false\n */\n disabled?: boolean\n /**\n * Whether the button is busy/loading.\n *\n * A button in this state is functionally and semantically disabled. Visually is does not look\n * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n *\n * @default false\n */\n loading?: boolean\n /**\n * A tooltip linked to the button element.\n */\n tooltip?: TooltipProps['content']\n}\n\ntype IconButtonProps = {\n icon: IconElement\n 'aria-label': string\n children?: never\n startIcon?: never\n endIcon?: never\n}\n\ntype LabelledButtonProps = {\n children: NonNullable<React.ReactNode>\n startIcon?: IconElement\n endIcon?: IconElement\n icon?: never\n}\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * 🎨 [Figma](https://www.figma.com/file/LYlWNzvhMDh907l07mPPQk/Product-Web?node-id=4693%3A175143)\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n {\n as = 'div',\n variant,\n tone = 'normal',\n size = 'normal',\n disabled = false,\n loading = false,\n tooltip,\n onClick,\n exceptionallySetClassName,\n children,\n startIcon,\n endIcon,\n icon,\n ...props\n },\n ref,\n) {\n const isDisabled = loading || disabled\n const buttonElement = (\n <Box\n {...props}\n as={as}\n ref={ref}\n aria-disabled={isDisabled}\n onClick={isDisabled ? preventDefault : onClick}\n className={[\n exceptionallySetClassName,\n styles.baseButton,\n styles[`variant-${variant}`],\n styles[`tone-${tone}`],\n styles[`size-${size}`],\n icon ? styles.iconButton : null,\n disabled ? styles.disabled : null,\n ]}\n >\n {icon ? (\n (loading && <Spinner />) || icon\n ) : (\n <>\n {startIcon ? (\n <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n {loading && !endIcon ? <Spinner /> : startIcon}\n </Box>\n ) : null}\n {children ? <span className={styles.label}>{children}</span> : null}\n {endIcon || (loading && !startIcon) ? (\n <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n {loading ? <Spinner /> : endIcon}\n </Box>\n ) : null}\n </>\n )}\n </Box>\n )\n\n // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n return tooltipContent ? (\n <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n ) : (\n buttonElement\n )\n})\n"],"names":["preventDefault","event","BaseButton","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","props","isDisabled","buttonElement","React","Box","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content"],"mappings":";;;;;;;;;;AAOA,SAASA,cAAT,CAAwBC,KAAxB;AACIA,EAAAA,KAAK,CAACD,cAAN;AACH;AA2DD;;;;;;;;;;;IASaE,UAAU,gBAAGC,oBAAoB,CAAyB,SAASD,UAAT,OAiBnEE,GAjBmE;qBAE/DC;MAAAA,0BAAK;MACLC,eAAAA;uBACAC;MAAAA,8BAAO;uBACPC;MAAAA,8BAAO;2BACPC;MAAAA,sCAAW;0BACXC;MAAAA,oCAAU;MACVC,eAAAA;MACAC,eAAAA;MACAC,iCAAAA;MACAC,gBAAAA;MACAC,iBAAAA;MACAC,eAAAA;MACAC,YAAAA;MACGC;;AAIP,MAAMC,UAAU,GAAGT,OAAO,IAAID,QAA9B;AACA,MAAMW,aAAa,gBACfC,aAAA,CAACC,GAAD,oBACQJ;AACJb,IAAAA,EAAE,EAAEA;AACJD,IAAAA,GAAG,EAAEA;qBACUe;AACfP,IAAAA,OAAO,EAAEO,UAAU,GAAGnB,cAAH,GAAoBY;AACvCW,IAAAA,SAAS,EAAE,CACPV,yBADO,EAEPW,MAAM,CAACC,UAFA,EAGPD,MAAM,cAAYlB,OAAZ,CAHC,EAIPkB,MAAM,WAASjB,IAAT,CAJC,EAKPiB,MAAM,WAAShB,IAAT,CALC,EAMPS,IAAI,GAAGO,MAAM,CAACE,UAAV,GAAuB,IANpB,EAOPjB,QAAQ,GAAGe,MAAM,CAACf,QAAV,GAAqB,IAPtB;IANf,EAgBKQ,IAAI,GACAP,OAAO,iBAAIW,aAAA,CAACM,OAAD,MAAA,CAAZ,IAA4BV,IAD3B,gBAGDI,aAAA,SAAA,MAAA,EACKN,SAAS,gBACNM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACT;;GAAtC,EACKL,OAAO,IAAI,CAACM,OAAZ,gBAAsBK,aAAA,CAACM,OAAD,MAAA,CAAtB,GAAoCZ,SADzC,CADM,GAIN,IALR,EAMKD,QAAQ,gBAAGO,aAAA,OAAA;AAAME,IAAAA,SAAS,EAAEC,MAAM,CAACK;GAAxB,EAAgCf,QAAhC,CAAH,GAAsD,IANnE,EAOKE,OAAO,IAAKN,OAAO,IAAI,CAACK,SAAxB,gBACGM,aAAA,CAACC,GAAD;AAAKM,IAAAA,OAAO,EAAC;AAAOL,IAAAA,SAAS,EAAEC,MAAM,CAACR;;GAAtC,EACKN,OAAO,gBAAGW,aAAA,CAACM,OAAD,MAAA,CAAH,GAAiBX,OAD7B,CADH,GAIG,IAXR,CAnBR,CADJ;;AAsCA,MAAMc,cAAc,GAAGb,IAAI,GAAGN,OAAH,aAAGA,OAAH,cAAGA,OAAH,GAAcO,KAAK,CAAC,YAAD,CAAnB,GAAoCP,OAA/D;AACA,SAAOmB,cAAc,gBACjBT,aAAA,CAACU,OAAD;AAASC,IAAAA,OAAO,EAAEF;GAAlB,EAAmCV,aAAnC,CADiB,GAGjBA,aAHJ;AAKH,CAhE6C;;;;"}
@@ -7,6 +7,7 @@ import styles from './box.module.css.js';
7
7
  import paddingStyles from './padding.module.css.js';
8
8
  import marginStyles from './margin.module.css.js';
9
9
 
10
+ var _excluded = ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"];
10
11
  var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
11
12
  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
12
13
 
@@ -48,7 +49,7 @@ var Box = /*#__PURE__*/polymorphicComponent(function Box(_ref, ref) {
48
49
  marginLeft = _ref.marginLeft,
49
50
  className = _ref.className,
50
51
  children = _ref.children,
51
- props = _objectWithoutPropertiesLoose(_ref, ["as", "position", "display", "flexDirection", "flexWrap", "flexGrow", "flexShrink", "alignItems", "justifyContent", "overflow", "width", "height", "background", "border", "borderRadius", "minWidth", "maxWidth", "textAlign", "padding", "paddingY", "paddingX", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "margin", "marginY", "marginX", "marginTop", "marginRight", "marginBottom", "marginLeft", "className", "children"]);
52
+ props = _objectWithoutPropertiesLoose(_ref, _excluded);
52
53
 
53
54
  var resolvedPaddingTop = (_ref2 = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY) !== null && _ref2 !== void 0 ? _ref2 : padding;
54
55
  var resolvedPaddingRight = (_ref3 = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX) !== null && _ref3 !== void 0 ? _ref3 : padding;