@norges-domstoler/dds-components 10.0.1 → 10.1.0

package/dist/components/Table/collapsible/CollapsibleRow.js

@@ -0,0 +1,157 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, Children, Fragment, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { Table } from '../index.js';
+import { removeButtonStyling } from '../../../helpers/styling/removeButtonStyling.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../../helpers/styling/focusVisible.js';
+import '../../../helpers/styling/hover.js';
+import '../../../helpers/styling/focus.js';
+import '../../../helpers/styling/danger.js';
+import '../../../helpers/styling/selection.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../../utils/idGenerator.js';
+import '../../../utils/color.js';
+import { DescriptionList } from '../../DescriptionList/DescriptionList.js';
+import { DescriptionListTerm } from '../../DescriptionList/DescriptionListTerm.js';
+import '../../DescriptionList/DescriptionListDesc.js';
+import '../../DescriptionList/DescriptionListGroup.js';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.js';
+import { Cell } from '../Cell.js';
+import { useCollapsibleTableContext } from './Table.context.js';
+import '../../../helpers/Backdrop/Backdrop.js';
+import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.js';
+import '../../../helpers/HiddenInput/HiddenInput.js';
+import '../../../helpers/Input/Input.styles.js';
+import '../../../helpers/Input/Input.tokens.js';
+import '../../InputMessage/InputMessage.js';
+import '../../../helpers/Paper/Paper.js';
+import '../../../helpers/RequiredMarker/RequiredMarker.js';
+import { StyledRow } from '../Table.styles.js';
+import { tableTokens } from '../Table.tokens.js';
+
+var collapseButton = tableTokens.collapseButton;
+var CollapseButton = styled.button.withConfig({
+  displayName: "CollapsibleRow__CollapseButton",
+  componentId: "sc-1bsqre3-0"
+})(["", " margin-left:auto;margin-right:auto;display:flex;align-items:center;justify-content:center;transition:", ";border-radius:", ";height:", ";width:", ";&:focus-visible{", "}"], removeButtonStyling, focusVisibleTransitionValue, collapseButton.borderRadius, collapseButton.height, collapseButton.width, focusVisible);
+var DescriptionListCell = styled(Cell).withConfig({
+  displayName: "CollapsibleRow__DescriptionListCell",
+  componentId: "sc-1bsqre3-1"
+})(["& > div{display:block;}"]);
+var CollapsibleRow = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$type = _a.type,
+    type = _a$type === void 0 ? 'body' : _a$type,
+    _a$mode = _a.mode,
+    mode = _a$mode === void 0 ? 'normal' : _a$mode,
+    children = _a.children,
+    rest = __rest(_a, ["type", "mode", "children"]);
+  var rowProps = Object.assign({
+    type: type,
+    mode: mode
+  }, rest);
+  var _useCollapsibleTableC = useCollapsibleTableContext(),
+    isCollapsed = _useCollapsibleTableC.isCollapsed,
+    headerValues = _useCollapsibleTableC.headerValues,
+    definingColumnIndex = _useCollapsibleTableC.definingColumnIndex;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    childrenCollapsed = _useState2[0],
+    setChildrenCollapsed = _useState2[1];
+  useEffect(function () {
+    !isCollapsed && setChildrenCollapsed(true);
+  }, [isCollapsed]);
+  var collapsedHeaderValues = headerValues.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var childrenArray = Children.toArray(children);
+  var collapsedChildren = childrenArray.filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) === -1;
+  });
+  var prefix = 'collapsibleRow';
+  var collapsibleIds = [];
+  var collapsedRenderedChildren = isCollapsed && collapsedHeaderValues.length > 0 ? collapsedChildren.map(function (child, index) {
+    var id = derivativeIdGenerator(prefix, index.toString());
+    collapsibleIds.push(id);
+    return jsxs(Fragment, {
+      children: [jsx(DescriptionListTerm, {
+        children: collapsedHeaderValues[index].content
+      }), /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+        collapsibleProps: {
+          isCollapsibleChild: true
+        }
+      })]
+    }, "DL-".concat(index));
+  }) : null;
+  var collapsedRows = collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsx(StyledRow, Object.assign({
+    type: "body"
+  }, {
+    children: jsx(DescriptionListCell, Object.assign({
+      colSpan: definingColumnIndex.length + 1
+    }, {
+      children: jsx(DescriptionList, {
+        children: collapsedRenderedChildren
+      })
+    }))
+  })) : null;
+  var definingColumnCells = childrenArray.slice().filter(function (column, index) {
+    return definingColumnIndex.indexOf(index) > -1;
+  }).sort(function (a, b) {
+    return definingColumnIndex.indexOf(childrenArray.indexOf(a)) - definingColumnIndex.indexOf(childrenArray.indexOf(b));
+  });
+  var headerRow = function headerRow() {
+    if (type !== 'head' || !isCollapsed) return null;
+    return jsx(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      children: jsxs(Fragment$1, {
+        children: [definingColumnCells, jsxs(Table.Cell, Object.assign({
+          type: "head",
+          layout: "center"
+        }, {
+          children: ["Utvid", jsx(VisuallyHidden, Object.assign({
+            as: "span"
+          }, {
+            children: "raden"
+          }))]
+        }))]
+      })
+    }));
+  };
+  var idList = spaceSeparatedIdListGenerator(collapsibleIds);
+  var rowWithChevron = function rowWithChevron() {
+    if (type !== 'body' || !isCollapsed) return null;
+    return jsxs(StyledRow, Object.assign({
+      ref: ref
+    }, rowProps, {
+      "data-isopencollapsibleheader": !childrenCollapsed && true
+    }, {
+      children: [definingColumnCells, jsx(Table.Cell, {
+        children: jsx(CollapseButton, Object.assign({
+          onClick: function onClick() {
+            return setChildrenCollapsed(!childrenCollapsed);
+          },
+          "aria-expanded": !childrenCollapsed,
+          "aria-controls": idList
+        }, {
+          children: jsx(AnimatedChevronUpDown, {
+            isUp: childrenCollapsed ? false : true,
+            height: "7.5px",
+            width: "12px"
+          })
+        }))
+      })]
+    }));
+  };
+  return isCollapsed && collapsedRenderedChildren && collapsedRenderedChildren.length > 0 ? jsxs(Fragment$1, {
+    children: [headerRow(), type === 'body' && jsxs(Fragment$1, {
+      children: [rowWithChevron(), childrenCollapsed ? null : collapsedRows]
+    })]
+  }) : jsx(StyledRow, Object.assign({
+    ref: ref
+  }, rowProps, {
+    children: children
+  }));
+});
+
+export { CollapsibleRow };

package/dist/components/Table/collapsible/CollapsibleTable.d.ts

@@ -0,0 +1,9 @@
+export declare const CollapsibleTable: import("react").ForwardRefExoticComponent<{
+    isCollapsed?: boolean | undefined;
+    headerValues: import("../Table.types").HeaderValues;
+    definingColumnIndex?: number[] | undefined;
+} & {
+    density?: import("../Table.types").TableDensity | undefined;
+    stickyHeader?: boolean | undefined;
+    withDividers?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/collapsible/CollapsibleTable.js

@@ -0,0 +1,42 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Table } from '../Table.js';
+import { CollapsibleTableContext } from './Table.context.js';
+
+var StyledTable = styled(Table).withConfig({
+  displayName: "CollapsibleTable__StyledTable",
+  componentId: "sc-1slp1a9-0"
+})(["width:100%;", ""], function (_ref) {
+  var withDividers = _ref.withDividers;
+  return withDividers && css(["tr[data-isopencollapsibleheader='true']{border-bottom:none;}"]);
+});
+var CollapsibleTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$density = props.density,
+    density = _props$density === void 0 ? 'normal' : _props$density,
+    children = props.children,
+    isCollapsed = props.isCollapsed,
+    headerValues = props.headerValues,
+    _props$definingColumn = props.definingColumnIndex,
+    definingColumnIndex = _props$definingColumn === void 0 ? [0] : _props$definingColumn,
+    rest = __rest(props, ["density", "children", "isCollapsed", "headerValues", "definingColumnIndex"]);
+  var tableProps = Object.assign({
+    ref: ref,
+    density: density,
+    isCollapsed: isCollapsed
+  }, rest);
+  return jsx(CollapsibleTableContext.Provider, Object.assign({
+    value: {
+      isCollapsed: isCollapsed,
+      headerValues: headerValues,
+      definingColumnIndex: definingColumnIndex
+    }
+  }, {
+    children: jsx(StyledTable, Object.assign({}, tableProps, {
+      children: children
+    }))
+  }));
+});
+
+export { CollapsibleTable };

package/dist/components/Table/collapsible/CollapsibleTable.stories.d.ts

@@ -0,0 +1,48 @@
+import { CollapsibleTableProps } from '..';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        isCollapsed?: boolean | undefined;
+        headerValues: import("../Table.types").HeaderValues;
+        definingColumnIndex?: number[] | undefined;
+    } & {
+        density?: import("..").TableDensity | undefined;
+        stickyHeader?: boolean | undefined;
+        withDividers?: boolean | undefined;
+    } & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>> & {
+        Row: import("react").ForwardRefExoticComponent<{
+            type?: import("..").TableRowType | undefined;
+            mode?: import("../Table.types").RowMode | undefined;
+            selected?: boolean | undefined;
+            hoverable?: boolean | undefined;
+        } & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+    };
+    argTypes: {
+        isCollapsed: {
+            control: {
+                type: string;
+            };
+        };
+        stickyHeader: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const SingleDefiningColumn: (args: CollapsibleTableProps) => JSX.Element;
+export declare const MultipleDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const PrioritizedDefiningColumns: (args: CollapsibleTableProps) => JSX.Element;
+export declare const withDividers: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Compact: (args: CollapsibleTableProps) => JSX.Element;
+export declare const StickyHeader: (args: CollapsibleTableProps) => JSX.Element;
+export declare const WithButtonAndIcons: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Responsive: (args: CollapsibleTableProps) => JSX.Element;
+export declare const ResposiveMultipleBreakpoints: (args: CollapsibleTableProps) => JSX.Element;
+export declare const Example: () => JSX.Element;

package/dist/components/Table/collapsible/Table.context.d.ts

@@ -0,0 +1,9 @@
+import { HeaderValues } from '../Table.types';
+declare type CollapsibleTableContextProps = {
+    isCollapsed?: boolean;
+    headerValues: HeaderValues;
+    definingColumnIndex: number[];
+};
+export declare const CollapsibleTableContext: import("react").Context<CollapsibleTableContextProps>;
+export declare const useCollapsibleTableContext: () => CollapsibleTableContextProps;
+export {};

package/dist/components/Table/collapsible/Table.context.js

@@ -0,0 +1,11 @@
+import { useContext, createContext } from 'react';
+
+var CollapsibleTableContext = /*#__PURE__*/createContext({
+  headerValues: [],
+  definingColumnIndex: [0]
+});
+var useCollapsibleTableContext = function useCollapsibleTableContext() {
+  return useContext(CollapsibleTableContext);
+};
+
+export { CollapsibleTableContext, useCollapsibleTableContext };

package/dist/components/Table/index.d.ts

@@ -1,8 +1,11 @@
-import { Table as BaseTable, TableProps, TableDensity } from './Table';
+import { Table as BaseTable } from './Table';
+import { CollapsibleTable as BaseCollapsibleTable } from './collapsible/CollapsibleTable';
+import { TableProps, TableDensity, CollapsibleTableProps, TableRowProps, TableRowType } from './Table.types';
 import { Head, TableHeadProps } from './Head';
 import { Body, TableBodyProps } from './Body';
 import { Foot, TableFootProps } from './Foot';
-import { Row, TableRowProps, TableRowType } from './Row';
+import { Row } from './Row';
+import { CollapsibleRow } from './collapsible/CollapsibleRow';
 import { Cell, TableCellProps, TableCellLayout, TableCellType } from './Cell';
 import { SortCell, TableSortCellProps, SortOrder } from './SortCell';
 import { TableWrapper } from './TableWrapper';
@@ -16,5 +19,10 @@ declare type TableCompoundProps = typeof BaseTable & {
     SortCell: typeof SortCell;
 };
 declare const Table: TableCompoundProps;
+declare type CollapsibleTableCompoundProps = typeof BaseCollapsibleTable & {
+    Row: typeof CollapsibleRow;
+};
+declare const CollapsibleTable: CollapsibleTableCompoundProps;
 export { Table };
-export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, };
+export { CollapsibleTable };
+export type { TableCellProps, TableDensity, TableProps, TableRowProps, TableRowType, TableHeadProps, TableBodyProps, TableFootProps, TableSortCellProps, SortOrder, TableCellLayout, TableCellType, CollapsibleTableProps, };

package/dist/components/Table/index.js

@@ -1,8 +1,10 @@
 import { Table as Table$1 } from './Table.js';
+import { CollapsibleTable as CollapsibleTable$1 } from './collapsible/CollapsibleTable.js';
 import { Head } from './Head.js';
 import { Body } from './Body.js';
 import { Foot } from './Foot.js';
 import { Row } from './Row.js';
+import { CollapsibleRow } from './collapsible/CollapsibleRow.js';
 import { Cell } from './Cell.js';
 import { SortCell } from './SortCell.js';
 import { TableWrapper } from './TableWrapper.js';
@@ -15,5 +17,7 @@ Table.Cell = Cell;
 Table.SortCell = SortCell;
 Table.Row = Row;
 Table.Foot = Foot;
+var CollapsibleTable = CollapsibleTable$1;
+CollapsibleTable.Row = CollapsibleRow;
 
-export { Table };
+export { CollapsibleTable, Table };

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { forwardRef, useId, useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
 import { useFloatPosition } from '../../hooks/useFloatPosition.js';
@@ -34,17 +34,51 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = useState(null),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    arrowElement = _useState4[0],
-    setArrowElement = _useState4[1];
+    inView = _useState4[0],
+    setInView = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    arrowElement = _useState6[0],
+    setArrowElement = _useState6[1];
   var _useFloatPosition = useFloatPosition(arrowElement, {
       placement: placement
     }),
     reference = _useFloatPosition.reference,
     floating = _useFloatPosition.floating,
     styles = _useFloatPosition.styles;
-  var combinedRef = useCombinedRef(ref, floating);
+  var tooltipRef = useRef(null);
+  var combinedRef = useCombinedRef(ref, floating, tooltipRef);
+  var closeWhenNotInView = function closeWhenNotInView(entries) {
+    var _entries = _slicedToArray(entries, 1),
+      entry = _entries[0];
+    entry.isIntersecting ? setInView(true) : setInView(false);
+  };
+  useEffect(function () {
+    var options = {
+      root: null,
+      rootMargin: '0px'
+    };
+    var ref = tooltipRef.current;
+    var observer = new IntersectionObserver(closeWhenNotInView, options);
+    if (ref) observer.observe(ref);
+    return function () {
+      if (ref) observer.unobserve(ref);
+    };
+  }, [tooltipRef]);
+  useEffect(function () {
+    if (tooltipRef.current) {
+      window.addEventListener('scroll', function () {
+        closeTooltip();
+      });
+    }
+    return function () {
+      if (tooltipRef.current) {
+        window.removeEventListener('scroll', function () {});
+      }
+    };
+  }, []);
   var timer;
   useEffect(function () {
     return function () {
@@ -83,7 +117,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: combinedRef,
     role: 'tooltip',
     'aria-hidden': !open,
-    open: open,
+    open: open && inView,
     style: Object.assign({}, styles.floating)
   };
   var arrowWrapperProps = {

package/dist/components/Typography/Paragraph/Paragraph.stories.d.ts

@@ -32,4 +32,5 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Overview: (args: StoryTProps) => JSX.Element;
 export declare const Default: (args: StoryTProps) => JSX.Element;

package/dist/index.d.ts

@@ -42,3 +42,4 @@ export * from './hooks';
 export * from './components/InlineEdit';
 export * from './components/TextArea';
 export * from './components/SplitButton';
+export * from './components/Stack';

package/dist/index.js

@@ -16,7 +16,7 @@ export { Heading } from './components/Typography/Heading/Heading.js';
 export { Link } from './components/Typography/Link/Link.js';
 export { Legend } from './components/Typography/Legend/Legend.js';
 export { Caption } from './components/Typography/Caption/Caption.js';
-export { Table } from './components/Table/index.js';
+export { CollapsibleTable, Table } from './components/Table/index.js';
 export { Breadcrumb } from './components/Breadcrumbs/Breadcrumb.js';
 export { Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.js';
 export { Icon } from './components/Icon/Icon.js';
@@ -213,3 +213,4 @@ export { InlineEditTextArea } from './components/InlineEdit/InlineEditTextArea.j
 export { InlineEditInput } from './components/InlineEdit/InlineEditInput.js';
 export { StyledTextArea, TextArea } from './components/TextArea/TextArea.js';
 export { SplitButton } from './components/SplitButton/SplitButton.js';
+export { HStack, VStack } from './components/Stack/Stack.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",