diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index a7b77242b1..2cd9387f28 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,43 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.108.3](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.2...monday-ui-react-core@2.108.3) (2024-05-16) + + +### Bug Fixes + +* **Dialog.tsx:** getContainer causing react error 200 ([#2124](https://github.com/mondaycom/vibe/issues/2124)) ([b018467](https://github.com/mondaycom/vibe/commit/b018467b43f648372f8cee3d2b7eb4c2c875287b)) + + + + + +## [2.108.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.1...monday-ui-react-core@2.108.2) (2024-05-16) + + +### Bug Fixes + +* **AlertBanner:** replace Button & Icon with IconButton ([#2120](https://github.com/mondaycom/vibe/issues/2120)) ([ee2d11c](https://github.com/mondaycom/vibe/commit/ee2d11cbb64d94a837e3b902e9eb1d1724c69cde)) +* **Storybook Docs:** typo ([#2119](https://github.com/mondaycom/vibe/issues/2119)) ([25ff8fb](https://github.com/mondaycom/vibe/commit/25ff8fbbea1d221c45dc69102b5d965b888d09da)) +* **TabsContext:** use onTabChange from child props ([#2125](https://github.com/mondaycom/vibe/issues/2125)) ([11bbddf](https://github.com/mondaycom/vibe/commit/11bbddf748a80bbebd246f5e8d3dd2bd96bd09ab)) +* **Typography:** change tooltipProps type to Partial< TooltipProps > ([#2118](https://github.com/mondaycom/vibe/issues/2118)) ([707c5c3](https://github.com/mondaycom/vibe/commit/707c5c31372c1cbb9e3bd8e8fcfefea91ab0088f)) +* **Typography:** make anchor style apply only to direct child ([#2115](https://github.com/mondaycom/vibe/issues/2115)) ([337975b](https://github.com/mondaycom/vibe/commit/337975b97de2120ed52b70a99ceaddb208015bbe)) + + + + + +## [2.108.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.108.0...monday-ui-react-core@2.108.1) (2024-05-09) + + +### Bug Fixes + +* **TextWIthHighlight:** escape regex ([#2113](https://github.com/mondaycom/vibe/issues/2113)) ([a980976](https://github.com/mondaycom/vibe/commit/a98097672abd405cccc8b5e07c0b10d7861c700a)) + + + + + # [2.108.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.107.0...monday-ui-react-core@2.108.0) (2024-05-07) diff --git a/packages/core/package.json b/packages/core/package.json index a19675e838..841228a783 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.108.0", + "version": "2.108.3", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", diff --git a/packages/core/src/components/AlertBanner/AlertBanner.tsx b/packages/core/src/components/AlertBanner/AlertBanner.tsx index 6f049c5bbe..7b8954cb5f 100644 --- a/packages/core/src/components/AlertBanner/AlertBanner.tsx +++ b/packages/core/src/components/AlertBanner/AlertBanner.tsx @@ -2,7 +2,7 @@ import { getStyle } from "../../helpers/typesciptCssModulesHelper"; import cx from "classnames"; import React, { ForwardedRef, forwardRef, ReactElement, useMemo } from "react"; import Button from "../../components/Button/Button"; -import Icon from "../../components/Icon/Icon"; +import IconButton from "../../components/IconButton/IconButton"; import CloseSmall from "../../components/Icon/Icons/components/CloseSmall"; import { AlertBannerBackgroundColor } from "./AlertBannerConstants"; import { NOOP } from "../../utils/function-utils"; @@ -126,17 +126,17 @@ const AlertBanner: VibeComponent & {
{isCloseHidden ? null : ( - + /> )}
diff --git a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap index ccfe1176ac..2e8e68dfae 100644 --- a/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap +++ b/packages/core/src/components/AlertBanner/__tests__/__snapshots__/AlertBanner-snapshots.test.js.snap @@ -50,13 +50,22 @@ exports[`AlertBanner should render correctly with props 1`] = ` aria-busy={false} aria-disabled={false} aria-label="Close" - className="closeBtn button sizeSmall kindTertiary colorOnPrimaryColor" + className="closeBtn button sizeMedium kindTertiary colorOnPrimaryColor noSidePadding" data-testid="alert-banner-close-button" onBlur={[Function]} onClick={[Function]} onFocus={[Function]} onMouseDown={[Function]} onMouseUp={[Function]} + style={ + { + "alignItems": "center", + "height": "32px", + "justifyContent": "center", + "padding": 0, + "width": "32px", + } + } type="button" > { } const containerElement = document.querySelector(containerSelector); - if (!containerElement) { + if (!containerElement || !(containerElement instanceof Element)) { // TODO add env check - if not jest env - trashing the logs - https://monday.monday.com/boards/3532714909/pulses/5570955392 // console.error( - // `Dialog: Container element with selector "${containerSelector}" was not found. Dialog may not be correctly positioned.` + // `Dialog: Container element with selector "${containerSelector}" was not found or is not an HTMLElement. Dialog may not be correctly positioned.` // ); return document.body; } diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts index 67337e8931..14bcbaebfe 100644 --- a/packages/core/src/components/Dropdown/Dropdown.types.ts +++ b/packages/core/src/components/Dropdown/Dropdown.types.ts @@ -231,11 +231,11 @@ export interface DropdownComponentProps extends CustomMenuBaseProps, CustomOptio */ isOptionSelected?: (option: DropdownOption, options: DropdownOption[]) => boolean; /** - * For display the drop down menu in overflow hidden/scroll container. + * Allows the dropdown menu to overflow its container. */ insideOverflowContainer?: boolean; /** - * For display the drop down menu in overflow hidden/scroll container which contains transform css function usage. + * Allows the dropdown menu to overflow its container, including CSS transformations. */ insideOverflowWithTransformContainer?: boolean; /** diff --git a/packages/core/src/components/Dropdown/DropdownConstants.js b/packages/core/src/components/Dropdown/DropdownConstants.js deleted file mode 100644 index d36a81f45f..0000000000 --- a/packages/core/src/components/Dropdown/DropdownConstants.js +++ /dev/null @@ -1,24 +0,0 @@ -export const defaultCustomStyles = baseStyles => baseStyles; - -export const ADD_AUTO_HEIGHT_COMPONENTS = ["container", "control", "valueContainer"]; - -export const DROPDOWN_ID = "dropdown-menu-id"; -export const DROPDOWN_MENU_ID = "dropdown-menu-list-id"; -export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu"; - -export const DROPDOWN_CHIP_COLORS = { - PRIMARY: "PRIMARY", - NEGATIVE: "NEGATIVE", - POSITIVE: "POSITIVE" -}; - -export const DROPDOWN_MENU_POSITION = { - ABSOLUTE: "absolute", - FIXED: "fixed" -}; - -export const DROPDOWN_MENU_PLACEMENT = { - TOP: "top", - BOTTOM: "bottom", - AUTO: "auto" -}; diff --git a/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.mdx b/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.mdx index b3c7905c39..6d3c3964a7 100644 --- a/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.mdx +++ b/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.mdx @@ -12,7 +12,7 @@ import * as ResponsiveListStories from "./ResponsiveList.stories"; ## Overview -ResponsiveList is a helper component, it is in charge of "moving" elements when there container is overflowing. It moves them to a list at the end of the container. +ResponsiveList is a helper component, it is in charge of "moving" elements when their container is overflowing. It moves them to a list at the end of the container. (the blue handle is a resize handler - not part of the component) diff --git a/packages/core/src/components/Tabs/TabsContext/TabsContext.tsx b/packages/core/src/components/Tabs/TabsContext/TabsContext.tsx index ca562d9024..b96d8098df 100644 --- a/packages/core/src/components/Tabs/TabsContext/TabsContext.tsx +++ b/packages/core/src/components/Tabs/TabsContext/TabsContext.tsx @@ -28,14 +28,14 @@ const TabsContext: FC = forwardRef( setPreviousActiveTabIdState(activeTabIdState); setActiveTabIdState(activeTabId); } - }, [activeTabId, prevActiveTabIdProp, activeTabIdState, setPreviousActiveTabIdState, setActiveTabIdState]); + }, [activeTabId, activeTabIdState, prevActiveTabIdProp]); const onTabClick = useCallback( (tabId: number) => { setPreviousActiveTabIdState(activeTabIdState); setActiveTabIdState(tabId); }, - [setPreviousActiveTabIdState, activeTabIdState, setActiveTabIdState] + [activeTabIdState] ); return ( @@ -47,7 +47,12 @@ const TabsContext: FC = forwardRef( > {React.Children.map(children, (child: TabsChild) => { if (child.type.isTabList) { - return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange: onTabClick }); + const originalOnTabChange = child.props.onTabChange; + const onTabChange = (tabId: number) => { + onTabClick(tabId); + originalOnTabChange?.(tabId); + }; + return React.cloneElement(child, { activeTabId: activeTabIdState, onTabChange }); } if (child.type.isTabPanels) { const animationDirection = previousActiveTabIdState < activeTabIdState ? "ltr" : "rtl"; diff --git a/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx b/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx index 5c4fe42dee..8c2931f2bb 100644 --- a/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx +++ b/packages/core/src/components/TextWithHighlight/TextWithHighlight.tsx @@ -71,11 +71,12 @@ const TextWithHighlight: React.FC = forwardRef( const textWithHighlights = useMemo(() => { if (!text || !highlightTerm || limit === 0) return text; - let finalTerm = highlightTerm; + let finalTerm = escapeRegExp(highlightTerm); if (allowTermSplit) { - finalTerm = highlightTerm.split(" ").join("|"); + finalTerm = finalTerm.split(" ").join("|"); } - const tokens = text.split(new RegExp(`(${finalTerm})`, ignoreCase ? "i" : "")); + const regex = new RegExp(`(${finalTerm})`, ignoreCase ? "i" : ""); + const tokens = text.split(regex); const parts = []; // Tokens include the term search (in odd indices) let highlightTermsCount = 0; @@ -128,3 +129,7 @@ const TextWithHighlight: React.FC = forwardRef( ); export default TextWithHighlight; + +function escapeRegExp(string: string) { + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); +} diff --git a/packages/core/src/components/Typography/Typography.module.scss b/packages/core/src/components/Typography/Typography.module.scss index 555f00191e..0100086c11 100644 --- a/packages/core/src/components/Typography/Typography.module.scss +++ b/packages/core/src/components/Typography/Typography.module.scss @@ -3,7 +3,7 @@ .typography { // TODO: remove anchor styles - a { + > a { text-decoration: none; color: var(--link-color); @include focus-style(); diff --git a/packages/core/src/components/Typography/Typography.tsx b/packages/core/src/components/Typography/Typography.tsx index 26527fce0f..0e83dcbd7e 100644 --- a/packages/core/src/components/Typography/Typography.tsx +++ b/packages/core/src/components/Typography/Typography.tsx @@ -34,7 +34,7 @@ export interface TypographyProps extends VibeComponentProps, HTMLAttributes; /** * Hide tooltip when hovering the text, by default the tooltip swill display when text contains an ellipsis */ diff --git a/packages/core/src/components/Typography/TypographyHooks.tsx b/packages/core/src/components/Typography/TypographyHooks.tsx index 17f0012004..c906848ac2 100644 --- a/packages/core/src/components/Typography/TypographyHooks.tsx +++ b/packages/core/src/components/Typography/TypographyHooks.tsx @@ -23,7 +23,7 @@ export function useTooltipProps( ref: MutableRefObject, withoutTooltip: boolean, ellipsis: boolean, - tooltipProps: TooltipProps, + tooltipProps: Partial, children: ElementContent, ignoreHeightOverflow: boolean, overflowTolerance: number