@dnb/eufemia 9.26.1 → 9.29.0

package/es/components/slider/style/themes/dnb-slider-theme-ui.scss

@@ -19,23 +19,6 @@
     }
   }
 
-  &__track {
-    &::before {
-      background-color: var(--color-sea-green);
-    }
-    &::after {
-      background-color: var(--color-mint-green-50);
-    }
-  }
-  &__state--disabled#{&}__track {
-    &::before {
-      background-color: var(--color-sea-green-30);
-    }
-    &::after {
-      background-color: var(--color-mint-green-25);
-    }
-  }
-
   &__thumb {
     @include defaultDropShadow();
   }

package/es/components/slider/types.d.ts

@@ -0,0 +1,75 @@
+/// <reference types="node" />
+import React from 'react';
+import type { SuffixChildren } from '../../shared/helpers/Suffix';
+import type { formatReturnType, formatOptionParams } from '../number-format/NumberUtils';
+import { IncludeSnakeCase } from '../../shared/helpers/withSnakeCaseProps';
+export declare type ValueTypes = number | Array<number>;
+export declare type onChangeEventProps = {
+    value: ValueTypes;
+    rawValue: number;
+    number?: formatReturnType | null;
+    event?: Event;
+    /** @deprecated use rawValue instead */
+    raw_value?: number;
+};
+export declare type SliderProps = IncludeSnakeCase<{
+    id?: string;
+    label?: React.ReactNode;
+    labelDirection?: 'vertical' | 'horizontal';
+    labelSrOnly?: boolean;
+    status?: string | boolean;
+    statusState?: 'error' | 'info';
+    statusProps?: Record<string, unknown>;
+    statusNoAnimation?: boolean;
+    globalStatusId?: string;
+    suffix?: SuffixChildren;
+    thumbTitle?: string;
+    addTitle?: string;
+    subtractTitle?: string;
+    min?: number;
+    max?: number;
+    value?: ValueTypes;
+    step?: number;
+    vertical?: boolean;
+    reverse?: boolean;
+    stretch?: boolean;
+    numberFormat?: formatOptionParams;
+    disabled?: boolean;
+    hideButtons?: boolean;
+    skeleton?: boolean;
+    class?: string;
+    className?: string;
+    onChange?: (props: onChangeEventProps) => void;
+    onDragStart?: (props: {
+        event: MouseEvent | TouchEvent;
+    }) => void;
+    onDragEnd?: (props: {
+        event: MouseEvent | TouchEvent;
+    }) => void;
+    /** @deprecated */
+    onInit?: (props: Omit<onChangeEventProps, 'rawValue'>) => void;
+    /** @deprecated The Slider does not support mouse wheel  */
+    use_scrollwheel?: boolean;
+    children?: React.ReactChild;
+}>;
+export declare type ThumbStateEnums = 'initial' | 'normal' | 'activated' | 'released' | 'focused' | 'jumped';
+export declare type SliderContextTypes = {
+    isMulti: boolean;
+    isReverse: boolean;
+    isVertical: boolean;
+    thumbState: ThumbStateEnums;
+    thumbIndex: React.RefObject<number>;
+    showStatus: boolean;
+    showButtons: boolean;
+    attributes: unknown;
+    allProps: SliderProps;
+    value: ValueTypes;
+    values: Array<number>;
+    setValue: (value: ValueTypes) => void;
+    setThumbState: (thumbState: ThumbStateEnums) => void;
+    setThumbIndex: (thumbIndex: number) => void;
+    emitChange: (emitEvent: MouseEvent | TouchEvent, value: number) => void;
+    trackRef: React.RefObject<HTMLElement>;
+    setJumpedState: () => void;
+    jumpedTimeout: React.RefObject<NodeJS.Timeout>;
+};

package/es/components/slider/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/table/Table.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { SkeletonShow } from '../skeleton/Skeleton';
+import { ISpacingProps } from '../../shared/interfaces';
+import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+export declare type TableSizes = 'medium' | 'large';
+export declare type TableVariants = 'basis' | 'not-defined-yet';
+export { StickyHelper };
+export interface TableProps extends StickyTableHeaderProps {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     */
+    className?: string;
+    /**
+     * Skeleton should be applied when loading content
+     */
+    skeleton?: SkeletonShow;
+    /**
+     * The size of the component.
+     * Default: large.
+     */
+    size?: TableSizes;
+    /**
+     * The variant of the component.
+     * Default: basis.
+     */
+    variant?: TableVariants;
+}
+export declare const defaultProps: {
+    size: string;
+    variant: string;
+};
+declare const Table: {
+    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & ISpacingProps): JSX.Element;
+    StickyHelper: () => JSX.Element;
+};
+export default Table;

package/es/components/table/Table.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset"];
+import React from 'react';
+import classnames from 'classnames';
+import Context from '../../shared/Context';
+import Provider from '../../shared/Provider';
+import { createSpacingClasses } from '../space/SpacingHelper';
+import { createSkeletonClass } from '../skeleton/SkeletonHelper';
+import { usePropsWithContext } from '../../shared/hooks';
+import { validateDOMAttributes } from '../../shared/component-helper';
+import { useStickyHeader, StickyHelper } from './TableStickyHeader';
+export { StickyHelper };
+export const defaultProps = {
+  size: 'large',
+  variant: 'basis'
+};
+
+const Table = componentProps => {
+  const context = React.useContext(Context);
+  const allProps = usePropsWithContext(componentProps, defaultProps, context === null || context === void 0 ? void 0 : context.Table, {
+    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+  });
+
+  const {
+    className,
+    children,
+    size,
+    skeleton,
+    variant,
+    sticky,
+    stickyOffset
+  } = allProps,
+        props = _objectWithoutProperties(allProps, _excluded);
+
+  const skeletonClasses = createSkeletonClass('font', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const {
+    elementRef
+  } = useStickyHeader(allProps);
+  validateDOMAttributes(allProps, props);
+  return React.createElement(Provider, {
+    skeleton: Boolean(skeleton)
+  }, React.createElement("table", _extends({
+    className: classnames(`dnb-table dnb-table__variant--${variant || 'basis'} dnb-table__size--${size || 'large'}`, spacingClasses, skeletonClasses, className, sticky && `dnb-table--sticky`),
+    ref: elementRef
+  }, props), children));
+};
+
+export default Table;
+Table.StickyHelper = StickyHelper;

package/es/components/table/TableStickyHeader.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface StickyTableHeaderProps {
+    /**
+     * Makes the Table header sticky
+     * Default: false
+     */
+    sticky?: boolean;
+    /**
+     * The offset from top in rem or em unit
+     * Default: false
+     */
+    stickyOffset?: string | number;
+    /**
+     * @deprecated Please use `stickyOffset`
+     */
+    sticky_offset?: string | number;
+}
+export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
+    elementRef: React.MutableRefObject<HTMLTableElement>;
+};
+export declare const StickyHelper: () => JSX.Element;

package/es/components/table/TableStickyHeader.js

@@ -0,0 +1,98 @@
+var _tr;
+
+import React from 'react';
+import { warn } from '../../shared/component-helper';
+export const useStickyHeader = ({
+  sticky,
+  stickyOffset,
+  sticky_offset
+}) => {
+  if (sticky_offset) {
+    stickyOffset = sticky_offset;
+  }
+
+  const elementRef = React.useRef();
+  const intersectionObserver = React.useRef(null);
+  React.useEffect(() => {
+    if (sticky) {
+      if (typeof IntersectionObserver === 'undefined') {
+        stickyWarning('IntersectionObserver not supported');
+        return;
+      }
+
+      if (!elementRef.current) {
+        stickyWarning('No ref element given');
+      }
+
+      const tableElem = elementRef.current;
+      let thHeight = 80;
+      let offsetTopPx = 0;
+
+      try {
+        const trElem = tableElem.querySelector('thead > tr:first-of-type, thead > .dnb-table__tr:first-of-type');
+        offsetTopPx = parseFloat(String(stickyOffset || '0'));
+
+        if (offsetTopPx > 0) {
+          if (String(stickyOffset).includes('em')) {
+            offsetTopPx = Math.round(offsetTopPx * 16);
+            trElem.style.setProperty('--table-top', String(stickyOffset));
+          } else {
+            trElem.style.setProperty('--table-top', `${offsetTopPx / 16}rem`);
+          }
+        }
+
+        const thElem = getThElement(tableElem);
+        thHeight = thElem && parseFloat(window.getComputedStyle(thElem).height) || thHeight;
+        intersectionObserver.current = new IntersectionObserver(entries => {
+          const [entry] = entries;
+
+          try {
+            if (entry.isIntersecting) {
+              trElem.classList.remove('show-shadow');
+            } else {
+              trElem.classList.add('show-shadow');
+            }
+          } catch (e) {
+            stickyWarning(e);
+          }
+        }, {
+          rootMargin: `-${thHeight + offsetTopPx}px 0px 0px 0px`
+        });
+        trElem.classList.add('sticky');
+        const tdElem = tableElem.querySelector('tbody > tr.dnb-table__sticky-helper > td:first-of-type') || getTdElement(tableElem);
+
+        if (tdElem) {
+          intersectionObserver.current.observe(tdElem);
+        }
+      } catch (e) {
+        stickyWarning(e);
+      }
+    }
+
+    return () => {
+      var _intersectionObserver;
+
+      (_intersectionObserver = intersectionObserver.current) === null || _intersectionObserver === void 0 ? void 0 : _intersectionObserver.disconnect();
+    };
+  }, [elementRef, sticky, stickyOffset]);
+  return {
+    elementRef
+  };
+};
+export const StickyHelper = () => {
+  return _tr || (_tr = React.createElement("tr", {
+    className: "dnb-table__sticky-helper"
+  }, React.createElement("td", null)));
+};
+
+const stickyWarning = (message = '') => {
+  warn('Could not enable Sticky mode in table:', message);
+};
+
+const getTdElement = element => {
+  return element.querySelector('tbody > tr:not(.dnb-table__sticky-helper):first-of-type > td:first-of-type, tbody > .dnb-table__tr:first-of-type > .dnb-table__td:first-of-type');
+};
+
+const getThElement = element => {
+  return element.querySelector('thead > tr:first-of-type > th:first-of-type, thead > .dnb-table__tr:first-of-type > .dnb-table__th:first-of-type');
+};

package/es/components/table/TableTd.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type TableTdProps = {
+    /**
+     * The content of the component.
+     * Default: null
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Td: (componentProps: TableTdProps & React.TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Td;

package/es/components/table/TableTd.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Td = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("td", _extends({
+    role: "cell",
+    className: classnames('dnb-table__td', className)
+  }, props));
+};
+
+export default Td;

package/es/components/table/TableTh.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TableThProps = {
+    /**
+     * The content of the table header given as Tr.
+     */
+    children: React.ReactNode;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Th: (componentProps: TableThProps & React.ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
+export default Th;

package/es/components/table/TableTh.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Th = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("th", _extends({
+    role: "columnheader",
+    className: classnames('dnb-table__th', className)
+  }, props), children);
+};
+
+export default Th;

package/es/components/table/TableTr.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TableTdProps } from './TableTd';
+export declare type TableTrProps = {
+    /**
+     * The content of the component.
+     */
+    children: Array<React.ReactElement<TableTdProps>>;
+    /**
+     * Custom className on the component root
+     * Default: null
+     */
+    className?: string;
+};
+declare const Tr: (componentProps: TableTrProps & React.TableHTMLAttributes<HTMLTableRowElement>) => JSX.Element;
+export default Tr;

package/es/components/table/TableTr.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+
+const Tr = componentProps => {
+  const {
+    className,
+    children
+  } = componentProps,
+        props = _objectWithoutProperties(componentProps, _excluded);
+
+  return React.createElement("tr", _extends({
+    className: classnames('dnb-table__tr', className)
+  }, props), children);
+};
+
+export default Tr;

package/es/components/table/index.d.ts

@@ -0,0 +1,3 @@
+export default Table;
+export * from "./Table";
+import Table from "./Table";

package/es/components/table/index.js

@@ -0,0 +1,3 @@
+import Table from './Table';
+export default Table;
+export * from './Table';

package/es/components/table/style/_table.scss

@@ -0,0 +1,147 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: var(--spacing-small);
+
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  &--fixed {
+    table-layout: fixed;
+  }
+
+  &__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0;
+  }
+
+  &,
+  &--left {
+    text-align: left;
+  }
+  &--right {
+    text-align: right;
+  }
+  &--center {
+    text-align: center;
+  }
+
+  & > caption {
+    font-size: var(--font-size-small);
+
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom;
+  }
+
+  /* stylelint-disable-next-line */
+
+  tr.sticky th {
+    position: sticky;
+    top: var(--table-top, 0); // is set by "stickyOffset" prop
+    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+
+      // The @mixin defaultDropShadow() does not work in this case
+      // because we need only a bottom shadow (with clip-path)
+      box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      clip-path: inset(6px 0 -48px 0);
+
+      transition: opacity 300ms ease-out;
+      [data-visual-test-wrapper] & {
+        transition: none;
+      }
+    }
+  }
+  tr.sticky.show-shadow th::before {
+    opacity: 1;
+  }
+
+  /* stylelint-disable */
+
+  &--small,
+  &--small > tr > th,
+  &--small > tr > td,
+  &--small > thead > tr > th,
+  &--small > tbody > tr > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr#{&}--small > th,
+  & > tr#{&}--small > td,
+  & > thead > tr#{&}--small > th,
+  & > tbody > tr#{&}--small > td {
+    font-size: var(--font-size-small);
+  }
+
+  & > tr > th#{&}--small,
+  & > tr > td#{&}--small,
+  & > thead > tr > th#{&}--small,
+  & > tbody > tr > td#{&}--small,
+  &__th#{&}--small,
+  &__td#{&}--small {
+    font-size: var(--font-size-small);
+  }
+
+  &--x-small,
+  &--x-small > tr > th,
+  &--x-small > tr > td,
+  &--x-small > thead > tr > th,
+  &--x-small > tbody > tr > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr#{&}--x-small > th,
+  & > tr#{&}--x-small > td,
+  & > thead > tr#{&}--x-small > th,
+  & > tbody > tr#{&}--x-small > td {
+    font-size: var(--font-size-x-small);
+  }
+
+  & > tr > th#{&}--x-small,
+  & > tr > td#{&}--x-small,
+  & > thead > tr > th#{&}--x-small,
+  & > tbody > tr > td#{&}--x-small,
+  &__th#{&}--x-small,
+  &__td#{&}--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  /* stylelint-enable */
+
+  &.dnb-skeleton {
+    > * {
+      -webkit-text-fill-color: var(--skeleton-color);
+    }
+  }
+}
+
+// Reset Table spacing
+.dnb-spacing .dnb-table {
+  p,
+  ul,
+  ol,
+  dl,
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}