schummar-table 0.5.3 → 0.6.0

package/dist/es/tableTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableTheme.js","sources":["../../src/theme/defaultTheme/defaultClasses.ts","../../src/theme/defaultTheme/popover.tsx","../../src/theme/defaultTheme/defaultColors.ts","../../src/components/spinnner.tsx","../../src/theme/defaultTheme/badge.tsx","../../src/theme/defaultTheme/button.tsx","../../src/theme/defaultTheme/checkbox.tsx","../../src/theme/defaultTheme/iconButton.tsx","../../src/theme/defaultTheme/textField.tsx","../../src/theme/defaultTheme/defaultComponents.ts","../../src/theme/defaultTheme/defaultIcons.tsx","../../src/theme/defaultTheme/defaultTexts.tsx","../../src/theme/defaultTheme/index.tsx","../../src/theme/tableTheme.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const white = '#ffffff';\nexport const lightGray = '#eeeeee';\nexport const gray = '#bdbdbd';\nexport const darkGray = '#777';\n\nconst cell = css({\n  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,\n  display: 'flex',\n  alignItems: 'center',\n  borderBottom: `1px solid #dfe2e9`,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  background: 'white',\n});\n\nexport const defaultClasses = {\n  table: css({\n    position: 'relative',\n    display: 'grid',\n  }),\n\n  cell,\n\n  cellFill: css({\n    borderBottom: `1px solid ${lightGray}`,\n  }),\n\n  headerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  firstCell: css({\n    justifyContent: 'start',\n  }),\n\n  sticky: css({\n    position: 'sticky',\n    top: 0,\n    zIndex: 2,\n  }),\n\n  headerFill: css({\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  text: css({\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n\n  card: css({\n    borderRadius: 4,\n    boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',\n    background: 'white',\n  }),\n};\n","import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TableTheme } from '../../types';\nimport { defaultClasses } from './defaultClasses';\n\nconst MARGIN = 10;\nconst MAX_OFFSET = 20;\n\nexport const PopoverContext = createContext({ depth: 0, visible: false });\n\nexport const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {\n  const popper = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<{ left: number; top: number }>();\n\n  useLayoutEffect(() => {\n    if (!anchorEl || !open) {\n      setPosition(undefined);\n      return;\n    }\n\n    let last: { left: number; top: number } | undefined;\n\n    function check() {\n      if (!anchorEl) return;\n      const { left: anchorLeft, bottom: anchorBottom, width: anchorWidth } = anchorEl.getBoundingClientRect();\n      const { width: popperWidth = 0, height: popperHeight = 0 } = popper.current?.getBoundingClientRect() ?? {};\n      const viewportWidth = document.documentElement.clientWidth;\n      const viewportHeight = document.documentElement.clientHeight;\n\n      const next = {\n        left:\n          align === 'center'\n            ? anchorLeft + anchorWidth / 2 - popperWidth / 2\n            : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),\n        top: anchorBottom,\n      };\n\n      if (next.left + popperWidth + MARGIN > viewportWidth) {\n        next.left = viewportWidth - popperWidth - MARGIN;\n      }\n      if (next.top + popperHeight + MARGIN > viewportHeight) {\n        next.top = viewportHeight - popperHeight - MARGIN;\n      }\n\n      if (next.left !== last?.left || next.top !== last?.top) {\n        setPosition(next);\n      }\n\n      last = next;\n    }\n    check();\n\n    const handle = setInterval(check, 16);\n    return () => {\n      clearInterval(handle);\n    };\n  }, [anchorEl, open]);\n\n  const { depth } = useContext(PopoverContext);\n  const visible = !hidden && !!position;\n  const context = useMemo(() => ({ depth: depth + 1, visible }), [depth, visible]);\n\n  if (!open) return null;\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {createPortal(\n        <>\n          <div\n            css={[\n              {\n                position: 'fixed',\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n                zIndex: 1000 + depth * 2,\n              },\n              hidden && { display: 'none' },\n            ]}\n            onClick={() => onClose()}\n          />\n\n          <div\n            ref={popper}\n            className={className}\n            css={[\n              defaultClasses.card,\n              {\n                position: 'fixed',\n                maxWidth: document.documentElement.clientWidth,\n                maxHeight: document.documentElement.clientHeight,\n                ...position,\n                zIndex: 1001 + depth * 2,\n              },\n              hidden && { display: 'none' },\n              !position && { visibility: 'hidden' },\n            ]}\n          >\n            {children}\n          </div>\n        </>,\n        document.body,\n      )}\n    </PopoverContext.Provider>\n  );\n};\n","import { TableTheme } from '../../types';\n\nexport const defaultColors: TableTheme['colors'] = {\n  primary: { main: '#1976d2', light: '#42a5f5', contrastText: '#fff' },\n  secondary: { main: '#9c27b0', light: '#ba68c8', contrastText: '#fff' },\n};\n","import { css } from '@emotion/react';\n\nexport function Spinner({ className }: { className?: string }) {\n  return (\n    <div\n      className={className}\n      css={css`\n        display: inline-block;\n        position: relative;\n        width: 1em;\n        height: 1em;\n\n        div {\n          box-sizing: border-box;\n          display: block;\n          position: absolute;\n          width: 0.8em;\n          height: 0.8em;\n          margin: 0.1em;\n          border: 0.1em solid #fff;\n          border-radius: 50%;\n          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n          border-color: currentColor transparent transparent transparent;\n        }\n        div:nth-of-type(1) {\n          animation-delay: -0.45s;\n        }\n        div:nth-of-type(2) {\n          animation-delay: -0.3s;\n        }\n        div:nth-of-type(3) {\n          animation-delay: -0.15s;\n        }\n        @keyframes lds-ring {\n          0% {\n            transform: rotate(0deg);\n          }\n          100% {\n            transform: rotate(360deg);\n          }\n        }\n      `}\n    >\n      <div />\n      <div />\n      <div />\n    </div>\n  );\n}\n","import { TableTheme } from '../../types';\n\nexport const Badge: TableTheme['components']['Badge'] = ({ badgeContent, children }) => {\n  if (!open) return null;\n\n  return (\n    <span\n      css={{\n        display: 'inline-flex',\n        position: 'relative',\n        flexShrink: 0,\n        verticalAlign: 'middle',\n      }}\n    >\n      {children}\n\n      <span\n        css={[\n          {\n            top: 0,\n            right: 0,\n            transform: 'scale(1) translate(50%, -50%)',\n            transformOrigin: '100% 0%',\n            height: 20,\n            display: 'flex',\n            padding: '0 6px',\n            zIndex: 1,\n            position: 'absolute',\n            flexWrap: 'wrap',\n            minWidth: 20,\n            transition: 'transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n            alignItems: 'center',\n            lineHeight: 1,\n            alignContent: 'center',\n            borderRadius: 10,\n            justifyContent: 'center',\n            fontSize: '0.8em',\n          },\n          !badgeContent && {\n            transform: 'scale(0) translate(50%, -50%)',\n            transition: 'transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n          },\n        ]}\n      >\n        {badgeContent}\n      </span>\n    </span>\n  );\n};\n","import { TableTheme } from '../../types';\nimport { darkGray, lightGray } from './defaultClasses';\n\nexport const Button: TableTheme['components']['Button'] = ({ startIcon, children, variant = 'text', ...props }) => {\n  return (\n    <button\n      css={[\n        {\n          padding: `var(--spacing) calc(var(--spacing) * 2)`,\n          display: 'inline-flex',\n          alignItems: 'center',\n          transition: 'background-color 150ms',\n          border: 'none',\n          cursor: 'pointer',\n          background: 'transparent',\n          borderRadius: 4,\n\n          '&:active:not(:disabled)': {\n            transform: 'scale3d(0.95, 0.95, 1)',\n          },\n        },\n        variant === 'text' && {\n          '&:hover': {\n            background: 'rgba(0, 0, 0, 0.1)',\n          },\n        },\n        variant === 'outlined' && {\n          border: `1px solid ${darkGray}`,\n\n          '&:disabled': {\n            borderColor: lightGray,\n          },\n        },\n        variant === 'contained' && {\n          color: 'var(--primaryContrastText)',\n          backgroundColor: 'var(--primaryMain)',\n          boxShadow: '0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)',\n\n          '&:hover': {\n            filter: 'brightness(0.9)',\n          },\n\n          '&:disabled': {\n            filter: 'grayscale()',\n            opacity: 0.5,\n          },\n        },\n      ]}\n      {...props}\n    >\n      {startIcon && <span css={{ marginRight: `calc(var(--spacing) * 2)` }}>{startIcon}</span>}\n      <span>{children}</span>\n    </button>\n  );\n};\n","import { TableTheme } from '../../types';\n\nexport const Checkbox: TableTheme['components']['Checkbox'] = ({ className, ...props }) => {\n  return (\n    <label\n      css={[\n        {\n          padding: 'calc(var(--spacing) * 1.8)',\n          display: 'flex',\n          color: 'currentcolor',\n          userSelect: 'none',\n\n          '& input': {\n            appearance: 'none',\n            margin: 0,\n          },\n        },\n        props.disabled && { color: 'rgba(0, 0, 0, 0.26)' },\n      ]}\n      className={className}\n    >\n      <input type=\"checkbox\" {...props} />\n\n      {props.checked ? (\n        <svg\n          css={{ fontSize: '1.25rem', width: '1em', height: '1em', fill: 'var(--primaryMain)' }}\n          focusable=\"false\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"></path>\n        </svg>\n      ) : (\n        <svg\n          css={{ fontSize: '1.25rem', width: '1em', height: '1em', fill: 'currentColor' }}\n          focusable=\"false\"\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"></path>\n        </svg>\n      )}\n    </label>\n  );\n};\n","import { TableTheme } from '../../types';\n\nexport const IconButton: TableTheme['components']['IconButton'] = (props) => {\n  return (\n    <button\n      css={{\n        padding: 'var(--spacing)',\n        borderRadius: '50%',\n        display: 'inline-flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        transition: 'background-color 150ms',\n        border: 'none',\n        cursor: 'pointer',\n        color: 'inherit',\n        background: 'transparent',\n\n        '&:hover': {\n          backgroundColor: 'rgba(0, 0, 0, 0.04)',\n        },\n\n        '&:active': {\n          transformColor: 'scale3d(0.95, 0.95, 1)',\n        },\n      }}\n      {...props}\n    />\n  );\n};\n","import { useState } from 'react';\nimport { TableTheme } from '../../types';\nimport { darkGray } from './defaultClasses';\n\nexport const TextField: TableTheme['components']['TextField'] = ({ endIcon, className, inputRef, ...props }) => {\n  const [focus, setFocus] = useState(false);\n\n  return (\n    <div className={className} css={{ display: 'flex' }}>\n      <span\n        css={[\n          {\n            flex: 1,\n            display: 'flex',\n            alignItems: 'center',\n            border: `1px solid ${darkGray}`,\n            borderRadius: 4,\n          },\n          focus && { border: '2px solid var(--primaryMain)', margin: -1 },\n        ]}\n      >\n        <input\n          ref={inputRef}\n          {...props}\n          value={props.value ?? ''}\n          onFocus={() => setFocus(true)}\n          onBlur={() => setFocus(false)}\n          css={{\n            flex: 1,\n            border: 'none',\n            outline: 'none',\n            borderRadius: 4,\n            padding: 'calc(var(--spacing) * 2)',\n            paddingRight: 0,\n            transition: 'outline 500ms',\n          }}\n        />\n\n        {endIcon}\n      </span>\n    </div>\n  );\n};\n","import { Spinner } from '../../components/spinnner';\nimport { TableTheme } from '../../types';\nimport { Badge } from './badge';\nimport { Button } from './button';\nimport { Checkbox } from './checkbox';\nimport { IconButton } from './iconButton';\nimport { Popover } from './popover';\nimport { TextField } from './textField';\n\nexport const defaultComponents: TableTheme['components'] = {\n  IconButton,\n  Checkbox,\n  Popover,\n  Button,\n  Badge,\n  TextField,\n  Spinner,\n};\n","import { ClassNames, css } from '@emotion/react';\nimport { cloneElement, HTMLProps } from 'react';\nimport { TableTheme } from '../../types';\n\nconst IconDefaultStyle = css({\n  width: '1.5em',\n  height: '1.5em',\n  color: 'inherit',\n});\n\nfunction Icon(svg: JSX.Element) {\n  return (props: HTMLProps<Element>) => (\n    <ClassNames>\n      {({ css }) =>\n        cloneElement(svg, {\n          ...props,\n          className: css(IconDefaultStyle, props.className),\n        })\n      }\n    </ClassNames>\n  );\n}\n\nconst Settings = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z\" />\n  </svg>,\n);\n\nconst Export = Icon(\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    enableBackground=\"new 0 0 24 24\"\n    height=\"24px\"\n    viewBox=\"0 0 24 24\"\n    width=\"24px\"\n    fill=\"currentColor\"\n  >\n    <g>\n      <rect fill=\"none\" height=\"24\" width=\"24\" />\n    </g>\n    <g>\n      <path d=\"M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z\" />\n    </g>\n  </svg>,\n);\n\nconst Clipboard = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z\" />\n  </svg>,\n);\n\nconst ChevronRight = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z\" />\n  </svg>,\n);\n\nconst Search = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\" />\n  </svg>,\n);\n\nconst Clear = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\" />\n  </svg>,\n);\n\nconst ArrowDropDown = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M7 10l5 5 5-5H7z\" />\n  </svg>,\n);\n\nconst FilterList = Icon(\n  <svg viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z\"\n    />\n  </svg>,\n);\n\nconst ArrowUpward = Icon(\n  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n    <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n    <path d=\"M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z\" />\n  </svg>,\n);\n\nexport const defaultIcons: TableTheme['icons'] = {\n  Settings,\n  Export,\n  Clipboard,\n  ChevronRight,\n  Search,\n  Clear,\n  ArrowDropDown,\n  FilterList,\n  ArrowUpward,\n};\n","import { TableTheme } from '../../types';\n\nexport const defaultTexts: TableTheme['text'] = {\n  selectColumns: 'Select visible columns',\n  noResults: 'No results',\n  exportTitle: 'Export',\n  exportCopy: 'To clipboard',\n  exportDownload: 'Download',\n  today: 'Today',\n  thisWeek: 'This week',\n  reset: 'Reset',\n  loading: 'Loading',\n  selected: (count) => `${count} selected`,\n};\n","import { TableTheme } from '../../types';\nimport { defaultColors } from './defaultColors';\nimport { defaultComponents } from './defaultComponents';\nimport { defaultIcons } from './defaultIcons';\nimport { defaultTexts } from './defaultTexts';\n\nexport const defaultTableTheme: TableTheme = {\n  text: defaultTexts,\n  components: defaultComponents,\n  icons: defaultIcons,\n  colors: defaultColors,\n  spacing: '5px',\n};\n","import { createContext, ReactNode, useContext } from 'react';\nimport { InternalTableProps, PartialTableTheme, TableTheme } from '../types';\nimport { defaultTableTheme } from './defaultTheme';\n\nlet globalTableTheme: PartialTableTheme = {};\nexport function configureTableTheme(tableTheme: PartialTableTheme) {\n  globalTableTheme = tableTheme;\n}\n\nexport const TableThemeContext = createContext<PartialTableTheme>({});\n\nexport function TableThemeProvider({ theme, children }: { theme: PartialTableTheme; children: ReactNode }) {\n  return <TableThemeContext.Provider value={theme}>{children}</TableThemeContext.Provider>;\n}\n\nexport function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T> {\n  return {\n    text: Object.assign({}, ...themes.map((theme) => theme.text)),\n    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),\n    components: Object.assign({}, ...themes.map((theme) => theme.components)),\n    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),\n    colors: {\n      primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),\n      secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),\n    },\n    spacing: themes\n      .map((theme) => theme.spacing)\n      .reverse()\n      .find((x) => x !== undefined),\n  };\n}\n\nexport function useTableTheme<T>(props: InternalTableProps<T>): TableTheme<T> {\n  const contextTableTheme = useContext(TableThemeContext);\n\n  return mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, props) as TableTheme<T>;\n}\n"],"names":["MARGIN","MAX_OFFSET","PopoverContext","createContext","depth","visible","Popover","anchorEl","open","hidden","onClose","children","className","align","popper","useRef","position","setPosition","useState","undefined","last","left","anchorLeft","bottom","anchorBottom","width","anchorWidth","getBoundingClientRect","popperWidth","height","popperHeight","current","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","next","Math","min","Infinity","top","handle","setInterval","check","useContext","context","useMemo","_jsx","createPortal","_jsxs","right","zIndex","display","defaultClasses","card","maxWidth","maxHeight","visibility","body","css","Badge","badgeContent","flexShrink","verticalAlign","transform","transformOrigin","padding","flexWrap","minWidth","transition","alignItems","lineHeight","alignContent","borderRadius","justifyContent","fontSize","Button","startIcon","variant","props","border","cursor","background","darkGray","borderColor","lightGray","color","backgroundColor","boxShadow","filter","opacity","marginRight","Checkbox","userSelect","appearance","margin","disabled","checked","fill","IconButton","transformColor","TextField","endIcon","inputRef","focus","setFocus","flex","value","outline","paddingRight","IconDefaultStyle","svg","cloneElement","Settings","Icon","Export","Clipboard","ChevronRight","Search","Clear","ArrowDropDown","FilterList","ArrowUpward","defaultIcons","defaultTexts","selectColumns","noResults","exportTitle","exportCopy","exportDownload","today","thisWeek","reset","loading","selected","count","defaultTableTheme","text","components","defaultComponents","icons","colors","defaultColors","spacing","globalTableTheme","tableTheme","TableThemeContext","theme","themes","Object","assign","map","classes","primary","secondary","reverse","find","x","contextTableTheme","mergeThemes"],"mappings":"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"}
+{"version":3,"file":"tableTheme.js","sources":["../../src/theme/defaultTheme/defaultClasses.ts","../../src/theme/defaultTheme/popover.tsx","../../src/theme/tableTheme.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const white = '#ffffff';\nexport const lightGray = '#eeeeee';\nexport const gray = '#bdbdbd';\nexport const darkGray = '#777';\n\nconst cell = css({\n  padding: `calc(var(--spacing) * 0.1) calc(2 * var(--spacing))`,\n  display: 'flex',\n  alignItems: 'center',\n  borderBottom: `1px solid #dfe2e9`,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  background: 'white',\n});\n\nexport const defaultClasses = {\n  table: css({\n    position: 'relative',\n    display: 'grid',\n  }),\n\n  cell,\n\n  cellFill: css({\n    borderBottom: `1px solid ${lightGray}`,\n  }),\n\n  headerCell: css(cell, {\n    padding: `var(--spacing) 0 var(--spacing) calc(2 * var(--spacing))`,\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  firstCell: css({\n    justifyContent: 'start',\n  }),\n\n  sticky: css({\n    position: 'sticky',\n    top: 0,\n    zIndex: 2,\n  }),\n\n  headerFill: css({\n    borderBottom: `1px solid #c9cfda`,\n    background: white,\n  }),\n\n  text: css({\n    minWidth: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  }),\n\n  card: css({\n    borderRadius: 4,\n    boxShadow: '0px 3px 14px 2px rgb(0 0 0 / 12%)',\n    background: 'white',\n  }),\n};\n","import React, { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { TableTheme } from '../../types';\nimport { defaultClasses } from './defaultClasses';\n\nconst MARGIN = 10;\nconst MAX_OFFSET = 20;\n\nexport const PopoverContext = createContext({ depth: 0, visible: false });\n\nexport const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {\n  const popper = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState<{ left: number; top: number }>();\n\n  useLayoutEffect(() => {\n    if (!anchorEl || !open) {\n      setPosition(undefined);\n      return;\n    }\n\n    let last: { left: number; top: number } | undefined;\n\n    function check() {\n      if (!anchorEl) return;\n      const { left: anchorLeft, bottom: anchorBottom, width: anchorWidth } = anchorEl.getBoundingClientRect();\n      const { width: popperWidth = 0, height: popperHeight = 0 } = popper.current?.getBoundingClientRect() ?? {};\n      const viewportWidth = document.documentElement.clientWidth;\n      const viewportHeight = document.documentElement.clientHeight;\n\n      const next = {\n        left:\n          align === 'center'\n            ? anchorLeft + anchorWidth / 2 - popperWidth / 2\n            : anchorLeft - Math.min(popperWidth ? popperWidth / 2 : Infinity, MAX_OFFSET),\n        top: anchorBottom,\n      };\n\n      if (next.left + popperWidth + MARGIN > viewportWidth) {\n        next.left = viewportWidth - popperWidth - MARGIN;\n      }\n      if (next.top + popperHeight + MARGIN > viewportHeight) {\n        next.top = viewportHeight - popperHeight - MARGIN;\n      }\n\n      if (next.left !== last?.left || next.top !== last?.top) {\n        setPosition(next);\n      }\n\n      last = next;\n    }\n    check();\n\n    const handle = setInterval(check, 16);\n    return () => {\n      clearInterval(handle);\n    };\n  }, [anchorEl, open]);\n\n  const { depth } = useContext(PopoverContext);\n  const visible = !hidden && !!position;\n  const context = useMemo(() => ({ depth: depth + 1, visible }), [depth, visible]);\n\n  if (!open) return null;\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {createPortal(\n        <>\n          <div\n            css={[\n              {\n                position: 'fixed',\n                left: 0,\n                right: 0,\n                top: 0,\n                bottom: 0,\n                zIndex: 1000 + depth * 2,\n              },\n              hidden && { display: 'none' },\n            ]}\n            onClick={() => onClose()}\n          />\n\n          <div\n            ref={popper}\n            className={className}\n            css={[\n              defaultClasses.card,\n              {\n                position: 'fixed',\n                maxWidth: document.documentElement.clientWidth,\n                maxHeight: document.documentElement.clientHeight,\n                ...position,\n                zIndex: 1001 + depth * 2,\n              },\n              hidden && { display: 'none' },\n              !position && { visibility: 'hidden' },\n            ]}\n          >\n            {children}\n          </div>\n        </>,\n        document.body,\n      )}\n    </PopoverContext.Provider>\n  );\n};\n","import { createContext, ReactNode } from 'react';\nimport { PartialTableTheme } from '../types';\n\nexport let globalTableTheme: PartialTableTheme = {};\nexport function configureTableTheme(tableTheme: PartialTableTheme) {\n  globalTableTheme = tableTheme;\n}\n\nexport const TableThemeContext = createContext<PartialTableTheme>({});\n\nexport function TableThemeProvider({ theme, children }: { theme: PartialTableTheme; children: ReactNode }) {\n  return <TableThemeContext.Provider value={theme}>{children}</TableThemeContext.Provider>;\n}\n\nexport function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T> {\n  return {\n    text: Object.assign({}, ...themes.map((theme) => theme.text)),\n    classes: Object.assign({}, ...themes.map((theme) => theme.classes)),\n    components: Object.assign({}, ...themes.map((theme) => theme.components)),\n    icons: Object.assign({}, ...themes.map((theme) => theme.icons)),\n    colors: {\n      primary: Object.assign({}, ...themes.map((theme) => theme.colors?.primary)),\n      secondary: Object.assign({}, ...themes.map((theme) => theme.colors?.secondary)),\n    },\n    spacing: themes\n      .map((theme) => theme.spacing)\n      .reverse()\n      .find((x) => x !== undefined),\n  };\n}\n"],"names":["MARGIN","MAX_OFFSET","PopoverContext","createContext","depth","visible","Popover","anchorEl","open","hidden","onClose","children","className","align","popper","useRef","position","setPosition","useState","undefined","last","left","anchorLeft","bottom","anchorBottom","width","anchorWidth","getBoundingClientRect","popperWidth","height","popperHeight","current","viewportWidth","document","documentElement","clientWidth","viewportHeight","clientHeight","next","Math","min","Infinity","top","handle","setInterval","check","useContext","context","useMemo","_jsx","createPortal","_jsxs","right","zIndex","display","defaultClasses","card","maxWidth","maxHeight","visibility","body","globalTableTheme","tableTheme","TableThemeContext","theme","themes","text","Object","assign","map","classes","components","icons","colors","primary","secondary","spacing","reverse","find","x"],"mappings":"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"}

package/dist/types/components/dateFilter.d.ts

@@ -2,9 +2,10 @@
 import { CommonFilterProps } from '../types';
 import { DatePickerProps, DateRange } from './datePicker';
 export declare function DateFilter<T, V>({ locale, firstDayOfWeek, singleSelect, filterBy, ...props }: {
+    /** Which locale to use to render the calendar. */
     locale?: string;
+    /** Which day of the week should be in the first column. */
     firstDayOfWeek?: DatePickerProps['firstDayOfWeek'];
+    /** If enabled, only single days can be selected. Ranges otherwise. */
     singleSelect?: boolean;
 } & CommonFilterProps<T, V, Date | DateRange | null, Date | DateRange | null>): JSX.Element;
-export declare const today: () => DateRange;
-export declare const thisWeek: (firstDayOfWeek?: number) => DateRange;

package/dist/types/components/dateInput.d.ts

@@ -0,0 +1,5 @@
+export declare function DateInput({ value, onChange, locale }: {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    locale?: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/datePicker.d.ts

@@ -3,13 +3,23 @@ export declare type DateRange = {
     max: Date;
 };
 export declare type DatePickerProps = {
+    /** Currently selected day or range of days. */
     value: Date | DateRange | null;
+    /** Callback for when the day (range) changes. */
     onChange: (value: Date | DateRange | null) => void;
+    /** If enabled, ranges can be selected. */
     rangeSelect?: boolean;
+    /** Which locale to use to render the calendar. */
     locale?: string;
+    /** Which day of the week should be in the first column. */
     firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
+/** Rounds a date down to the start of the day. */
 export declare const startOfDay: (d: Date) => Date;
+/** Rounds a date up to the end of the day. */
 export declare const endOfDay: (d: Date) => Date;
+export declare const today: () => DateRange;
+export declare const thisWeek: (firstDayOfWeek?: number) => DateRange;
+/** Returns whether two dates and/or date ranges intersect. Intersection is considered per day. */
 export declare function dateIntersect(a: Date | null | DateRange, b: Date | null | DateRange): boolean;
 export declare function DatePicker({ value, onChange, rangeSelect, locale, firstDayOfWeek }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/selectFilter.d.ts

@@ -1,8 +1,12 @@
 import { ReactNode } from 'react';
 import { CommonFilterProps, SerializableValue } from '../types';
 export declare function SelectFilter<T, V, F extends SerializableValue>({ options: providedOptions, stringValue, render, singleSelect, ...props }: {
+    /** Which options are provided to select. By default all unique item values are used. */
     options?: F[];
+    /** String representation of a value. Used to filter options via the text field. */
     stringValue?: (value: F) => string;
+    /** Render values. By default a string representation of the value is used. */
     render?: (value: F) => ReactNode;
+    /** If enabled, only one option can be selected at a time. */
     singleSelect?: boolean;
 } & CommonFilterProps<T, V, F, Set<F>>): JSX.Element;

package/dist/types/components/textFilter.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 import { CommonFilterProps } from '../types';
 export declare function TextFilter<T, V>({ compare, filterBy, ...props }: {
-    compare?: (a: string, b: string) => boolean;
+    /** Custom comparison function. Should return true if an item value matches the current filter value.
+     * By default a fuzzy text comparison is used.
+     */
+    compare?: (itemValue: string, filterValue: string) => boolean;
 } & CommonFilterProps<T, V, string, string>): JSX.Element;

package/dist/types/hooks/useTheme.d.ts

@@ -1 +1,2 @@
-export declare function useTheme(): import("../types").TableTheme<unknown>;
+import { TableTheme } from '../types';
+export declare function useTheme<T>(): TableTheme<T>;

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
 export { AutoFocusTextField } from './components/autoFocusTextField';
 export { DateFilter } from './components/dateFilter';
+export { dateIntersect, DatePicker, endOfDay, startOfDay } from './components/datePicker';
+export type { DatePickerProps, DateRange } from './components/datePicker';
 export { SelectFilter } from './components/selectFilter';
 export { ColumnContext, Table, TableContext, useColumnContext, useTableContext } from './components/table';
 export { TextFilter } from './components/textFilter';
@@ -8,4 +10,4 @@ export { useTheme } from './hooks/useTheme';
 export type { TableStateStorage } from './internalState/tableStateStorage';
 export { termMatch, textMatch } from './misc/textMatch';
 export { configureTableTheme, mergeThemes, TableThemeContext, TableThemeProvider } from './theme/tableTheme';
-export type { Column, Id, InternalColumn, PartialTableTheme, Rows, Sort, SortDirection, TableProps } from './types';
+export type { Column, Id, InternalColumn, PartialTableTheme, Sort, SortDirection, TableProps } from './types';

package/dist/types/theme/mui4Theme/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { PartialTableTheme, TableTheme } from '../../types';
-export declare const mui4Theme: Partial<TableTheme>;
+import { PartialTableTheme } from '../../types';
+export declare const mui4Theme: PartialTableTheme;
 export declare function Mui4TableThemeProvider({ theme, children }: {
     theme?: PartialTableTheme;
     children: ReactNode;

package/dist/types/theme/mui5Theme/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { PartialTableTheme, TableTheme } from '../../types';
-export declare const mui5Theme: Partial<TableTheme>;
+import { PartialTableTheme } from '../../types';
+export declare const mui5Theme: PartialTableTheme;
 export declare function Mui5TableThemeProvider({ theme, children }: {
     theme?: PartialTableTheme;
     children: ReactNode;

package/dist/types/theme/tableTheme.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { InternalTableProps, PartialTableTheme, TableTheme } from '../types';
+import { PartialTableTheme } from '../types';
+export declare let globalTableTheme: PartialTableTheme;
 export declare function configureTableTheme(tableTheme: PartialTableTheme): void;
 export declare const TableThemeContext: import("react").Context<PartialTableTheme<unknown>>;
 export declare function TableThemeProvider({ theme, children }: {
@@ -7,4 +8,3 @@ export declare function TableThemeProvider({ theme, children }: {
     children: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function mergeThemes<T>(...themes: PartialTableTheme<T>[]): PartialTableTheme<T>;
-export declare function useTableTheme<T>(props: InternalTableProps<T>): TableTheme<T>;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSInterpolation } from '@emotion/serialize';
-import React, { ComponentType, CSSProperties, ReactNode, Ref } from 'react';
+import React, { ComponentType, ReactNode, Ref } from 'react';
 import { TableStateStorage } from './internalState/tableStateStorage';
 import { CsvExportOptions } from './misc/csvExport';
 export declare type Sort = {
@@ -102,7 +102,7 @@ export interface TableTheme<T = unknown> {
 export declare type PartialTableTheme<T = unknown> = {
     [K in keyof TableTheme<T>]?: TableTheme<T>[K] extends Record<string, any> ? Partial<TableTheme<T>[K]> : TableTheme<T>[K];
 };
-export interface TableProps<T> extends Partial<TableTheme<T>> {
+export interface TableProps<T> extends PartialTableTheme<T> {
     /** The data to be rendered. One item per row. */
     items?: T[];
     /** Unique id for each item/row. */
@@ -198,7 +198,7 @@ export interface TableProps<T> extends Partial<TableTheme<T>> {
     /** If enabled, automatically store table state in localStorage, localForage or another compatible storage. */
     persist?: {
         storage: TableStateStorage;
-        id?: string;
+        id: string;
         include?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[];
         exclude?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[];
     };
@@ -220,16 +220,29 @@ export declare type TableItem<T = unknown> = T & {
     children: TableItem<T>[];
 };
 export declare type Column<T, V> = {
+    /** Column id. If not provided, the index in the column array will be used.
+     * An explicit id is better however for controlling column related states, persitance etc.
+     */
     id?: string;
+    /** Render table header for this column. */
     header?: ReactNode;
+    /** Extract value for this column */
     value: (item: T) => V;
+    /** Render table cell. If not provided, a string representation of the value will be rendered. */
     renderCell?: (value: V, item: T) => ReactNode;
+    /** Serialize column value for exports. If not provided, a string representation of the value will be used. */
     exportCell?: (value: V, item: T) => string | number;
+    /** Customize sort criteria. By default it will be the value itself in case it's a number or Date, or a string representation of the value otherwise. */
     sortBy?: ((value: V, item: T) => unknown) | ((value: V) => unknown)[];
+    /** Set filter component that will be displayed in the column header */
     filter?: ReactNode;
+    /** Prevent hiding the column. */
     cannotHide?: boolean;
+    /** Specify a css width.
+     * @default 'max-content'
+     */
     width?: string;
-    justifyContent?: CSSProperties['justifyContent'];
+    /** Provide css class names to override columns styles. */
     classes?: TableTheme<T>['classes'];
     /** If the column definition changes, supply parameters that it depends on. If not set, the column will not update */
     dependencies?: any[];
@@ -240,16 +253,8 @@ export declare type InternalColumn<T, V> = Required<Omit<Column<T, V>, 'id'>, 'h
 declare type Required<T, S> = T & {
     [P in keyof T as P extends S ? P : never]-?: T[P];
 };
-export declare type Rows<T, V> = [{
-    value: V;
-    item: T;
-}, ...{
-    value: V;
-    item: T;
-}[]];
 export declare type InternalTableState<T> = {
     props: InternalTableProps<T>;
-    theme: TableTheme<T>;
     sort: Sort[];
     selection: Set<Id>;
     expanded: Set<Id>;
@@ -268,16 +273,25 @@ export declare type InternalTableState<T> = {
     lastSelectedId?: Id;
 };
 export declare type CommonFilterProps<T, V, F, S extends SerializableValue> = {
+    /** Filter by? By default the column value will be used. If filterBy returns an array, an items will be active if at least one entry matches the active filter. */
     filterBy?: (value: V, item: T) => F | F[];
+    /** Preselected filter value. */
     defaultValue?: S;
+    /** Controlled filter value. */
     value?: S;
+    /** Notifies on filter change. */
     onChange?: (value?: S) => void;
-    dependencies?: any[];
+    /** Whether to persist filter value (given that filter persitance is enabled for the table).
+     * @default true
+     */
     persist?: boolean;
 };
 export declare type FilterImplementation<T, V, F, S extends SerializableValue> = CommonFilterProps<T, V, F, S> & {
+    /** Unique filter id. Used to persist filter values. */
     id: string;
+    /** Whether the filter is active currently. */
     isActive: (filterValue: S) => boolean;
+    /** When the filter is active, this function is used to filter the items to be displayed. */
     test: (filterValue: S, value: F) => boolean;
 };
 export declare type SerializableValue = string | number | boolean | null | Date | SerializableArray | SerializableObject | SerializableSet | SerializableMap;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "schummar-table",
   "repository": "schummar/schummar-table",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -84,7 +84,6 @@
   },
   "devDependencies": {
     "@emotion/styled": "^11.8.1",
-    "@fontsource/fira-sans": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@mui/material": "^5.5.0",
     "@types/react": "17",
@@ -92,11 +91,8 @@
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
     "@vitejs/plugin-react": "^1.2.0",
-    "@vitejs/plugin-react-refresh": "^1.3.6",
     "eslint": "^8.10.0",
-    "localforage": "^1.10.0",
     "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
     "prettier": "^2.5.1",
     "react": "17",
     "react-dom": "17",