authscape 1.0.374 → 1.0.376

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.374",
+  "version": "1.0.376",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/kaban/Action.js

@@ -0,0 +1,23 @@
+import React, {forwardRef, CSSProperties} from 'react';
+import classNames from 'classnames';
+
+export const Action = forwardRef(
+  ({active, className, cursor, style, ...props}, ref) => {
+    return (
+      <button
+        ref={ref}
+        {...props}
+        className={"Action"}
+        tabIndex={0}
+        style={
+          {
+            ...style,
+            cursor,
+            '--fill': active?.fill,
+            '--background': active?.background,
+          }
+        }
+      />
+    );
+  }
+);

package/src/components/kaban/Container.js

@@ -0,0 +1,66 @@
+import React, {forwardRef} from 'react';
+import classNames from 'classnames';
+
+import { Handle } from './Handle';
+import { Remove } from './Remove';
+
+import styles from 'authscape/dist/Container.module.css';
+
+export const Container = forwardRef(
+  (
+    {
+      children,
+      columns = 1,
+      handleProps,
+      horizontal,
+      hover,
+      onClick,
+      onRemove,
+      label,
+      placeholder,
+      style,
+      scrollable,
+      shadow,
+      unstyled,
+      ...props
+    },
+    ref
+  ) => {
+    const Component = onClick ? 'button' : 'div';
+
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        style={
+          {
+            ...style,
+            '--columns': columns,
+          }
+        }
+        className={classNames(
+          styles.Container,
+          unstyled && styles.unstyled,
+          horizontal && styles.horizontal,
+          hover && styles.hover,
+          placeholder && styles.placeholder,
+          scrollable && styles.scrollable,
+          shadow && styles.shadow
+        )}
+        onClick={onClick}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {label ? (
+          <div className={"Header"}>
+            {label}
+            <div className={"Actions"}>
+              {onRemove ? <Remove onClick={onRemove} /> : undefined}
+              <Handle {...handleProps} />
+            </div>
+          </div>
+        ) : null}
+        {placeholder ? children : <ul style={{paddingLeft:"10px", paddingRight:"10px", marginTop:"5px"}}>{children}</ul>}
+      </Component>
+    );
+  }
+);

package/src/components/kaban/Handle.js

@@ -0,0 +1,20 @@
+import React, {forwardRef} from 'react';
+
+import {Action} from './Action';
+
+export const Handle = forwardRef(
+  (props, ref) => {
+    return (
+      <Action
+        ref={ref}
+        cursor="grab"
+        data-cypress="draggable-handle"
+        {...props}
+      >
+        <svg viewBox="0 0 20 20" width="12">
+          <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+        </svg>
+      </Action>
+    );
+  }
+);

package/src/components/kaban/Item.js

@@ -0,0 +1,139 @@
+import React, {useEffect} from 'react';
+import classNames from 'classnames';
+
+import { Handle } from './Handle';
+import { Remove } from './Remove';
+
+import styles from 'authscape/dist/Item.module.css';
+import { Box } from '@mui/material';
+
+export const Item = React.memo(
+  React.forwardRef(
+    (
+      {
+        color,
+        dragOverlay,
+        dragging,
+        disabled,
+        fadeIn,
+        name,
+        handle,
+        handleProps,
+        height,
+        cardDetail,
+        CardTemplate,
+        index,
+        listeners,
+        onRemove,
+        renderItem,
+        sorting,
+        style,
+        transition,
+        transform,
+        value,
+        handleMoreClick,
+        handleMoreClose,
+        wrapperStyle,
+        ...props
+      },
+      ref
+    ) => {
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      cardDetail.moreClicked = handleMoreClick;
+
+      return renderItem ? (
+        renderItem({
+          dragOverlay: Boolean(dragOverlay),
+          dragging: Boolean(dragging),
+          sorting: Boolean(sorting),
+          index,
+          fadeIn: Boolean(fadeIn),
+          listeners,
+          ref,
+          style,
+          transform,
+          transition,
+          value,
+        })
+      ) : (
+        <li
+          className={classNames(
+            styles.Wrapper,
+            fadeIn && styles.fadeIn,
+            sorting && styles.sorting,
+            dragOverlay && styles.dragOverlay
+          )}
+          style={
+            {
+              ...wrapperStyle,
+              transition: [transition, wrapperStyle?.transition]
+                .filter(Boolean)
+                .join(', '),
+              '--translate-x': transform
+                ? `${Math.round(transform.x)}px`
+                : undefined,
+              '--translate-y': transform
+                ? `${Math.round(transform.y)}px`
+                : undefined,
+              '--scale-x': transform?.scaleX
+                ? `${transform.scaleX}`
+                : undefined,
+              '--scale-y': transform?.scaleY
+                ? `${transform.scaleY}`
+                : undefined,
+              '--index': index,
+              '--color': color,
+              paddingTop:"10px"
+            }
+          }
+          ref={ref}
+        >
+          <Box
+            className={classNames(
+              styles.Item,
+              dragging && styles.dragging,
+              handle && styles.withHandle,
+              dragOverlay && styles.dragOverlay,
+              disabled && styles.disabled,
+              color && styles.color
+            )}
+            style={style}
+            data-cypress="draggable-item"
+            {...(!handle ? listeners : undefined)}
+            {...props}
+            tabIndex={!handle ? 0 : undefined}>
+
+              
+            {CardTemplate != null &&
+             <CardTemplate props={cardDetail} />
+            }
+
+            {CardTemplate == null &&
+              <Box>
+              {name}
+              </Box>
+            }
+
+            <span className={"Actions"}>
+              {onRemove ? (
+                <Remove className={"Remove"} onClick={onRemove} />
+              ) : null}
+              {handle ? <Handle {...handleProps} {...listeners} /> : null}
+            </span>
+          </Box>
+        </li>
+      );
+    }
+  )
+);