@equinor/apollo-utils 0.1.3-beta.1 → 0.1.3-beta.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@equinor/apollo-utils",
   "main": "src/index.ts",
   "types": "src/index.ts",
-  "version": "0.1.3-beta.1",
+  "version": "0.1.3-beta.3",
   "license": "MIT",
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --external react",
@@ -27,11 +27,9 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.8",
     "@equinor/eds-core-react": "^0.27.0",
-    "styled-components": "^5.3.7",
-    "@equinor/apollo-components": "^3.1.0"
+    "styled-components": "^5.3.7"
   },
   "devDependencies": {
-    "@equinor/apollo-components": "*",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@vitest/ui": "^0.28.5",

package/src/edit-cells/EditableDropdownCell.tsx

@@ -1,9 +1,9 @@
-import { TypographyCustom } from '@equinor/apollo-components'
 import { Autocomplete } from '@equinor/eds-core-react'
 import { CellContext } from '@tanstack/react-table'
 import { Controller, useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
 import { FormMeta, useEditMode } from '../form-meta'
+import { TypographyCustom } from './TypographyCustom'
 
 export interface Option {
   label: string

package/src/edit-cells/EditableNumberCell.tsx

@@ -1,10 +1,10 @@
-import { TypographyCustom } from '@equinor/apollo-components'
 import { TextField } from '@equinor/eds-core-react'
 import { CellContext } from '@tanstack/react-table'
 import { ChangeEvent } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
 import { FormMeta, useEditMode } from '../form-meta'
+import { TypographyCustom } from './TypographyCustom'
 import { getHelperTextProps } from './utils'
 
 export function EditableNumberCell<T extends FormMeta>(context: CellContext<T, number>) {

package/src/edit-cells/EditableTextAreaCell.tsx

@@ -1,11 +1,11 @@
-import { PopoverCell, stopPropagation } from '@equinor/apollo-components'
 import { Button, Dialog as EDS, Icon, TextField } from '@equinor/eds-core-react'
 import { CellContext } from '@tanstack/react-table'
 import { ChangeEvent, useState } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
 import { FormMeta, useEditMode } from '../form-meta'
-import { getHelperTextProps } from './utils'
+import { PopoverCell } from './PopoverCell'
+import { getHelperTextProps, stopPropagation } from './utils'
 
 interface EdtiableTextAreaProps<T extends FormMeta> extends CellContext<T, string> {
   title: string

package/src/edit-cells/EditableTextFieldCell.tsx

@@ -1,9 +1,9 @@
-import { TypographyCustom } from '@equinor/apollo-components'
 import { TextField } from '@equinor/eds-core-react'
 import { CellContext } from '@tanstack/react-table'
 import { Controller, FieldPath, useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
 import { FormMeta, useEditMode } from '../form-meta'
+import { TypographyCustom } from './TypographyCustom'
 import { getHelperTextProps } from './utils'
 
 export function EditableTextFieldCell<T extends FormMeta>(context: CellContext<T, unknown>) {

package/src/edit-cells/PopoverCell.tsx

@@ -0,0 +1,42 @@
+import { Popover, Typography } from '@equinor/eds-core-react'
+import { ReactNode, useRef, useState } from 'react'
+import { TypographyCustom } from './TypographyCustom'
+import { stopPropagation } from './utils'
+
+interface PopoverCellProps {
+  id: string
+  value: string
+  title?: string | JSX.Element | ReactNode
+}
+
+export const PopoverCell = (props: PopoverCellProps) => {
+  const [open, setOpen] = useState(false)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const handleClick = () => setOpen(!open)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div style={{ position: 'relative' }} ref={anchorRef}>
+      <TypographyCustom truncate onClick={stopPropagation(handleClick)}>
+        {String(props.value)}
+      </TypographyCustom>
+      <Popover
+        id={props.id}
+        open={open}
+        aria-controls="expand cell"
+        anchorEl={anchorRef.current}
+        onClose={handleClose}
+        placement={'bottom'}
+      >
+        {props.title && (
+          <Popover.Title>
+            <Popover.Header>{props.title}</Popover.Header>
+          </Popover.Title>
+        )}
+        <Popover.Content>
+          <Typography>{String(props.value)}</Typography>
+        </Popover.Content>
+      </Popover>
+    </div>
+  )
+}

package/src/edit-cells/TypographyCustom.tsx

@@ -0,0 +1,62 @@
+import {
+  Typography as EdsTypography,
+  TypographyProps as EdsTypographyProps,
+} from '@equinor/eds-core-react'
+import { tokens } from '@equinor/eds-tokens'
+import { CSSProperties } from 'react'
+import styled from 'styled-components'
+
+export type TypographyProps = {
+  truncate?: boolean
+} & EdsTypographyProps
+
+const truncateStyle: CSSProperties = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+}
+
+export const TypographyCustom = (props: TypographyProps) => {
+  const { truncate, style: styleFromProps, ...edsTypographyProps } = props
+
+  if (truncate)
+    return (
+      <HoverCapture>
+        <EdsTypography
+          {...edsTypographyProps}
+          style={{
+            ...styleFromProps,
+            ...truncateStyle,
+          }}
+        />
+      </HoverCapture>
+    )
+
+  return <EdsTypography {...edsTypographyProps} style={styleFromProps} />
+}
+
+const HoverCapture = styled.div`
+  height: ${tokens.typography.table.cell_text.lineHeight};
+  background-color: inherit;
+
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  & > * {
+    width: inherit;
+    position: absolute;
+  }
+
+  &:hover > * {
+    width: auto;
+    z-index: 1;
+    padding: 0.5em 1em;
+    margin: -0.5em -1em;
+
+    background-color: inherit;
+  }
+`

package/src/edit-cells/utils.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@equinor/eds-core-react'
 import { Variants } from '@equinor/eds-core-react/dist/types/components/types'
 import { error_filled, warning_filled } from '@equinor/eds-icons'
+import { SyntheticEvent } from 'react'
 
 interface GetHelperTextPropsProps {
   error?: { message?: string }
@@ -38,3 +39,11 @@ export function getHelperTextProps({
     helperIcon: null,
   }
 }
+
+/** Wrap an event handler and stop event propagation */
+export function stopPropagation<T extends HTMLElement>(handler: (e: SyntheticEvent<T>) => void) {
+  return (e: SyntheticEvent<T>) => {
+    e.stopPropagation()
+    handler(e)
+  }
+}