Merge branch 'main' into feat/typography-size

CHANGELOG.md

@@ -1,3 +1,35 @@
+# [1.17.0](https://github.com/mParticle/aquarium/compare/v1.16.1...v1.17.0) (2024-06-07)
+
+
+### Bug Fixes
+
+* hide minimap after user clicks on a button ([#264](https://github.com/mParticle/aquarium/issues/264)) ([21a399c](https://github.com/mParticle/aquarium/commit/21a399c3afb60bde0737d472db095fba22c41d63))
+
+
+### Features
+
+* allows UPS to receive cookie config options ([#261](https://github.com/mParticle/aquarium/issues/261)) ([8ab9ce9](https://github.com/mParticle/aquarium/commit/8ab9ce9a5e08284b5956ed91b9a1581b00b4678f))
+* minimap active state ([#263](https://github.com/mParticle/aquarium/issues/263)) ([ae9a2b0](https://github.com/mParticle/aquarium/commit/ae9a2b0387b7474d13950078cd5b2ee663848ba7))
+
+# [1.17.0-ups-configurable-cookie.2](https://github.com/mParticle/aquarium/compare/v1.17.0-ups-configurable-cookie.1...v1.17.0-ups-configurable-cookie.2) (2024-06-07)
+
+
+### Bug Fixes
+
+* hide minimap after user clicks on a button ([#264](https://github.com/mParticle/aquarium/issues/264)) ([21a399c](https://github.com/mParticle/aquarium/commit/21a399c3afb60bde0737d472db095fba22c41d63))
+
+
+### Features
+
+* minimap active state ([#263](https://github.com/mParticle/aquarium/issues/263)) ([ae9a2b0](https://github.com/mParticle/aquarium/commit/ae9a2b0387b7474d13950078cd5b2ee663848ba7))
+
+# [1.17.0-ups-configurable-cookie.1](https://github.com/mParticle/aquarium/compare/v1.16.1...v1.17.0-ups-configurable-cookie.1) (2024-06-03)
+
+
+### Features
+
+* allows UPS to receive cookie config options instead of only the key ([517d030](https://github.com/mParticle/aquarium/commit/517d03066bb1d55968d650bb7a2a6162a1567ad7))
+
 ## [1.16.1](https://github.com/mParticle/aquarium/compare/v1.16.0...v1.16.1) (2024-06-03)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mparticle/aquarium",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "description": "mParticle Component Library",
   "license": "Apache-2.0",
   "keywords": [
@@ -65,6 +65,7 @@
     "stylelint-config-recommended": "14.0.0",
     "stylelint-config-standard": "36.0.0",
     "stylelint-no-indistinguishable-colors": "2.1.0",
+    "type-fest": "^4.20.0",
     "typescript": "5.3.3",
     "vite": "5.0.12",
     "vite-plugin-dts": "3.7.2",

src/components/data-display/Table/Table.tsx

@@ -1,17 +1,18 @@
 import { Table as AntTable } from 'antd'
 import { type TableProps as AntTableProps } from 'antd'
+import { type AnyObject } from 'antd/es/_util/type'
 import { ConfigProvider } from 'src/components'
 import { type ColumnType, type ExpandableConfig } from 'antd/es/table/interface'
 import { type ColumnsType, type TableProps } from 'antd/es/table'
 
-export interface ITableProps extends AntTableProps {}
+export interface ITableProps<RecordType extends AnyObject = AnyObject> extends AntTableProps<RecordType> {}
 
 export type { ColumnType, ExpandableConfig, ColumnsType, TableProps }
 
-export const Table = (props: ITableProps) => {
+export const Table = <RecordType extends AnyObject = AnyObject>(props: ITableProps<RecordType>) => {
   return (
     <ConfigProvider>
-      <AntTable {...props} />
+      <AntTable<RecordType> {...props} />
     </ConfigProvider>
   )
 }

src/components/data-display/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import { Tag as AntTag } from 'antd'
 import { type TagProps as AntTagProps } from 'antd'
-import { type CheckableTagProps as AntCheckableTagProps } from 'antd/lib/tag'
+import { type CheckableTagProps as AntCheckableTagProps } from 'antd/es/tag'
 import { ConfigProvider } from 'src/components'
 
 export interface ITagProps extends AntTagProps {

src/components/data-entry/QueryItem/Cascader.stories.tsx

@@ -103,7 +103,7 @@ export const Error: Story = {
   },
 }
 
-export const Icon: Story = {
+export const WithIcon: Story = {
   args: {
     placeholder: 'QueryItem.ValueSelector.Cascader Icon',
     options: exampleOptions,
@@ -140,4 +140,4 @@ export const LoadData: Story = {
       console.log(value)
     },
   },
-}
+}

src/components/navigation/GlobalNavigation/GlobalNavigation.stories.tsx

@@ -487,7 +487,8 @@ export const MP: Story = {
       overviewHref: '/',
       onLinkClick: link => alert(link.href),
       onUnauthorizedClick: link => alert(`unauthorized ${link?.href} `),
-      unauthorizedLinks: ['oversight', 'dataPlatform'],
+      unauthorizedLinks: ['dataPlatform'],
+      activeLink: 'oversight',
       links: [
         { linkId: 'oversight', href: '/oversight' },
         { linkId: 'dataPlatform', href: '/data-platform' },

src/components/navigation/GlobalNavigation/GlobalNavigationItems.d.ts

@@ -44,4 +44,5 @@ export interface IMiniMapOptions {
   onLinkClick: (link: MiniMapLink) => void
   onUnauthorizedClick: (link?: MiniMapLink) => void
   unauthorizedLinks: MiniMapLinks[]
+  activeLink: MiniMapLinks
 }

src/components/navigation/GlobalNavigation/HomeButton.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Center, Icon, Popover, Tooltip } from 'src/components'
 import MiniMap from 'src/components/navigation/MiniMap/MiniMap'
-import { IMiniMapOptions } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
+import { IMiniMapOptions, MiniMapLink } from 'src/components/navigation/GlobalNavigation/GlobalNavigationItems'
 
 interface MpHomeButtonProps {
   onClick: () => void
@@ -29,18 +29,30 @@ function MpHomeButton(props: MpHomeButtonProps) {
 }
 
 function MinimapWithPopover(props: MinimapWithPopoverProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const handleLinkClick = (link: MiniMapLink) => {
+    setIsPopoverOpen(false)
+    props.onLinkClick(link)
+  }
+  const handlePopoverOpenChange = (newPopoverState: boolean) => {
+    setIsPopoverOpen(newPopoverState)
+  }
+
   return (
     <Popover
-      content={() => (
+      content={
         <MiniMap
           overviewHref={props.overviewHref}
           onUnauthorizedClick={props.onUnauthorizedClick}
           links={props.links}
-          onLinkClick={props.onLinkClick}
+          onLinkClick={handleLinkClick}
           unauthorizedLinks={props.unauthorizedLinks}
+          activeLink={props.activeLink}
         />
-      )}
+      }
       placement="rightBottom"
+      open={isPopoverOpen}
+      onOpenChange={handlePopoverOpenChange}
       arrow={false}>
       <MpHomeButton onClick={props.onPopoverClick} />
     </Popover>
@@ -68,6 +80,7 @@ export function HomeButton(props: HomeButtonProps) {
       onLinkClick={props.minimapOptions.onLinkClick}
       unauthorizedLinks={props.minimapOptions.unauthorizedLinks}
       onPopoverClick={props.onMpHomeClick}
+      activeLink={props.minimapOptions.activeLink}
     />
   )
 }

src/components/navigation/MiniMap/MiniMap.tsx

@@ -25,6 +25,7 @@ const Minimap = (props: IMiniMapProps) => {
     href: link.href,
     variant: 'drop-shadow',
     isUnauthorized: props.unauthorizedLinks.includes(link.linkId),
+    isActive: props.activeLink === link.linkId,
   }))
 
   return (

src/components/navigation/MiniMap/SvgLinker.tsx

@@ -6,6 +6,7 @@ export interface ISvgLink {
   href: string
   variant?: 'regular' | 'black' | 'drop-shadow'
   isUnauthorized?: boolean
+  isActive?: boolean
 }
 
 interface ISvgLinkerProps {
@@ -21,20 +22,28 @@ export const SvgLinker = (props: ISvgLinkerProps) => {
     const href = target.closest('a')?.getAttribute('href')
     const link = props.links.find(b => b.href === href)
 
-    if (link) props.onLinkClick(link)
+    if (link) {
+      props.onLinkClick(link)
+    }
   }
 
-  return <div onClick={handleContainerClick}>{wrapButtonsIntoLinks(props.children)}</div>
+  return (
+    <div onClick={handleContainerClick} className="svg-linker__container">
+      {wrapButtonsIntoLinks(props.children)}
+    </div>
+  )
 
   function wrapButtonsIntoLinks(parent: React.ReactNode): React.ReactNode {
     const wrapElement = (element: ReactElement): ReactElement => {
       const { id, children } = element.props
       const link = props.links.find(b => b.elementId === id)
 
       if (link) {
-        const className = `svg-linker-root__button svg-linker-root__button--${link.variant}${
-          link.isUnauthorized ? ' svg-linker-root__button--disabled' : ''
-        }`
+        const isActiveClass = link.isActive ? ' svg-linker-root__button--active' : ''
+        const isUnauthorizedClass = link.isUnauthorized ? ' svg-linker-root__button--disabled' : ''
+        const linkStateClass = isActiveClass || isUnauthorizedClass
+
+        const className = `svg-linker-root__button svg-linker-root__button--${link.variant} ${linkStateClass} `
 
         return (
           <a key={id} href={link.href} className={className}>