@bbl-digital/snorre 3.0.1 → 3.0.2

package/lib/core/BoxedTable/TableRow/index.js

@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import { Key } from '../../../enums/Keyboard';
 import IconChevronDown from '../../../icons/General/IconChevronDown';
 import { ButtonWrapper, ExpandableContentWrapper, ExpandableWrapper, ExpandButtonWrapper, IconWrapper, Wrapper } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,12 +16,21 @@ const TableRow = ({
 }) => {
   const [expanded, setExpanded] = useState(!!defaultExpanded);
 
+  const handleKeyPress = isExpand => e => {
+    if (e.key === Key.enter || e.key === Key.space) {
+      e.preventDefault();
+      isExpand ? setExpanded(!expanded) : onClick && onClick(e);
+    }
+  };
+
   const ButtonContent = children && /*#__PURE__*/_jsx(ButtonWrapper, {
     onClick: onClick,
     className: "table-row-button",
     "data-tracking-name": trackingName,
     "data-tracking-event": trackingEvent,
     role: "button",
+    tabIndex: 0,
+    onKeyDown: handleKeyPress(false),
     children: /*#__PURE__*/_jsx("span", {
       children: children
     })
@@ -30,7 +40,9 @@ const TableRow = ({
     className: "table-row-expandable",
     role: "button",
     children: [/*#__PURE__*/_jsxs(ExpandButtonWrapper, {
-      onClick: e => setExpanded(!expanded),
+      onClick: () => setExpanded(!expanded),
+      onKeyDown: handleKeyPress(true),
+      tabIndex: 0,
       children: [/*#__PURE__*/_jsx("span", {
         children: children
       }), /*#__PURE__*/_jsx(IconWrapper, {

package/lib/core/BoxedTable/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IDrop } from './models';
 interface IProps {
     /** column widths, applied as style: grid-template-columns */
     columns: string;
@@ -10,6 +11,8 @@ interface IProps {
     hasCheckbox?: boolean;
     /** Children */
     children?: React.ReactNode | React.ReactNode[];
+    /** Creates a drag and drop list, returns and id of moved object, old index and new index */
+    onDrop?: (item: IDrop) => void;
 }
 declare const BoxedTable: React.FC<IProps>;
 export default BoxedTable;

package/lib/core/BoxedTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BoxedTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,MAAM;IACd,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACvC,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAmBhC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BoxedTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,UAAU,MAAM;IACd,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACvC,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC9C,4FAA4F;IAC5F,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAA;CAC/B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAiDhC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/lib/core/BoxedTable/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Wrapper } from './styles';
 import { useTheme } from '@emotion/react';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const BoxedTable = ({
@@ -8,15 +10,42 @@ const BoxedTable = ({
   breakpoint,
   children,
   type = 'default',
-  hasCheckbox = false
+  hasCheckbox = false,
+  onDrop
 }) => {
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(Wrapper, {
+  const defaultProps = {
     hasCheckbox: hasCheckbox,
     columns: columns,
     bp: breakpoint,
     type: type,
-    theme: theme,
+    theme: theme
+  };
+
+  const handleDrop = result => {
+    if (!result.destination || result.source.index === result.destination.index) return;
+    const dropped = {
+      id: result.draggableId,
+      from: result.source.index,
+      to: result.destination.index
+    };
+    onDrop && onDrop(dropped);
+  };
+
+  if (onDrop) return /*#__PURE__*/_jsx(DragDropContext, {
+    onDragEnd: handleDrop,
+    children: /*#__PURE__*/_jsx(Droppable, {
+      droppableId: "drop-list",
+      children: provided => /*#__PURE__*/_jsxs(Wrapper, {
+        isDragList: true,
+        ...defaultProps,
+        ...provided.droppableProps,
+        ref: provided.innerRef,
+        children: [children, provided.placeholder]
+      })
+    })
+  });
+  return /*#__PURE__*/_jsx(Wrapper, { ...defaultProps,
     children: children
   });
 };

package/lib/core/BoxedTable/models.d.ts

@@ -0,0 +1,6 @@
+export interface IDrop {
+    id: string;
+    from: number;
+    to: number;
+}
+//# sourceMappingURL=models.d.ts.map

package/lib/core/BoxedTable/models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BoxedTable/models.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX"}

package/lib/core/BoxedTable/models.js

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

package/lib/core/BoxedTable/styles.d.ts

@@ -5,6 +5,7 @@ interface IStyledTableProps {
     bp?: string;
     type: 'default' | 'mysite' | 'compact';
     hasCheckbox?: boolean;
+    isDragList?: boolean;
     theme: IAppTheme;
 }
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{

package/lib/core/BoxedTable/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BoxedTable/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,EAAE,SAAS,CAAA;CACjB;AAeD,eAAO,MAAM,OAAO;;;6HAkInB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/BoxedTable/styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAGjD,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;IACtC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;CACjB;AAeD,eAAO,MAAM,OAAO;;;6HA+InB,CAAA"}