diginet-core-ui 1.3.89-beta.2 → 1.3.89-beta.4

package/components/breadcrumb/index.js

@@ -0,0 +1,144 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from "./..";
+import { Icon } from "../../icons/effect";
+import OptionWrapper from "../others/option-wrapper";
+import PropTypes from 'prop-types';
+import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { displayFlex, flexWrap, itemsCenter, mg, mgx, pd, userSelectNone } from "../../styles/general";
+import { classNames } from "../../utils";
+const insertSeparators = (items, separator) => {
+  return items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      acc = acc.concat(current, jsx("li", {
+        css: BreadcrumbSeparatorCSS,
+        "aria-hidden": true,
+        key: `separator-${index}`,
+        className: 'DGN-UI-Breadcrumb-separator'
+      }, separator));
+    } else {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+};
+const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  children,
+  className,
+  data,
+  id,
+  itemsAfterCollapse,
+  itemsBeforeCollapse,
+  maxItems,
+  separator,
+  style
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  const [expanded, setExpanded] = React.useState(false);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  const renderItemsBeforeAndAfter = allItems => {
+    const handleClickExpand = () => {
+      setExpanded(true);
+    };
+    if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
+      return allItems;
+    }
+    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonIcon, {
+      key: "ellipsis",
+      name: 'MoreHoriz',
+      width: 24,
+      height: 16,
+      onClick: handleClickExpand
+    }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+  };
+  const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
+    var _data$onClick;
+    return jsx("li", {
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, jsx(Typography, {
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? 'h5' : 'p3',
+      mapping: 'a',
+      color: 'text.sub',
+      href: data === null || data === void 0 ? void 0 : data.href,
+      onClick: data === null || data === void 0 ? void 0 : (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data)
+    }, item === null || item === void 0 ? void 0 : item.name));
+  }) : React.Children.toArray(children).filter(child => {
+    return /*#__PURE__*/React.isValidElement(child);
+  }).map((child, idx) => jsx("li", {
+    className: 'DGN-UI-Breadcrumb-li',
+    key: `child-${idx}`
+  }, child));
+  return useMemo(() => {
+    return jsx("nav", {
+      ref: ref,
+      id: id,
+      style: style,
+      className: classNames('DGN-UI-Breadcrumb', className)
+    }, jsx("ol", {
+      css: BreadcrumbOlCSS,
+      className: 'DGN-UI-Breadcrumb-ol'
+    }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), separator)));
+  }, [children, className, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, style, expanded]);
+}));
+const BreadcrumbOlCSS = css`
+    ${displayFlex};
+    ${flexWrap};
+    ${itemsCenter};
+    ${pd(0)};
+    ${mg(0)};
+    list-style: none;
+`;
+const BreadcrumbSeparatorCSS = css`
+    ${displayFlex};
+    ${userSelectNone};
+    ${mgx([2])};
+`;
+Breadcrumb.defaultProps = {
+  className: '',
+  itemsBeforeCollapse: 1,
+  itemsAfterCollapse: 1,
+  maxItems: 8,
+  separator: jsx(Icon, {
+    name: 'ArrowRight',
+    width: 16,
+    height: 16
+  }),
+  style: {}
+};
+Breadcrumb.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Class for component. */
+  data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    href: PropTypes.string,
+    onClick: PropTypes.func
+  })),
+  /** Class for component. */
+  itemsBeforeCollapse: PropTypes.number,
+  /** Class for component. */
+  itemsAfterCollapse: PropTypes.number,
+  /** Class for component. */
+  maxItems: PropTypes.number,
+  /**	Custom separator node. */
+  separator: PropTypes.node,
+  /** Style inline of component. */
+  style: PropTypes.object
+};
+export { Breadcrumb };
+export default OptionWrapper(Breadcrumb);

package/components/index.js

@@ -31,6 +31,9 @@ export { default as Button } from "./button";
 export { default as ButtonIcon } from "./button/icon";
 export { default as ButtonMore } from "./button/more";
 
+// BREADCRUMB
+export { default as Breadcrumb } from "./breadcrumb";
+
 // CARD
 export { default as Card } from "./card";
 export { default as CardHeader } from "./card/header";

package/components/popover/index.js

@@ -5,15 +5,10 @@ import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { bgColor, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
+import { bgColor, borderBottom, borderRadius4px, displayFlex, displayNone, flexCol, inset, justifyBetween, overflowAuto, parseMaxWidthHeight, parseMinWidthHeight, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, isMobile, refType as ref } from "../../utils";
 const {
-  colors: {
-    system: {
-      white: systemWhite
-    }
-  },
   typography: {
     paragraph1
   },
@@ -148,10 +143,10 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const anchorRef = useRef(anchor);
   const [openState, setOpenState] = useState(open);
   const [element, setElement] = useState(null);
+  const arrowSize = arrow ? 6 : 0;
   const _PortalPopoverCSS = PortalPopoverCSS(zIndex, fullScreen);
   const _PopoverContainerCSS = PopoverContainerCSS(bgColor, width, height);
-  const _PopoverArrowCSS = PopoverArrowCSS(bgColor);
-  const arrowSize = arrow ? 6 : 0;
+  const _PopoverArrowCSS = PopoverArrowCSS(bgColor, arrowSize);
   if (direction) {
     const directionObject = getDirectionPopover(direction);
     anchorOrigin = directionObject.anchorOrigin;
@@ -218,7 +213,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         var _anchor5, _anchor$current;
         anchor = ((_anchor5 = anchor) === null || _anchor5 === void 0 ? void 0 : _anchor5.element) || ((_anchor$current = anchor.current) === null || _anchor$current === void 0 ? void 0 : _anchor$current.element) || anchor.current;
       }
-      if (!anchor) return;
+      if (!document.body.contains(anchor)) return;
       if (arrow && anchorOrigin.vertical !== anchorOrigin.horizontal && transformOrigin.vertical !== transformOrigin.horizontal) {
         aPosition = getArrowPosition(anchorOrigin, transformOrigin, translate);
       }
@@ -528,13 +523,13 @@ const PopoverContainerCSS = (bgCl, width, height) => css`
     opacity: 0;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 `;
-const PopoverArrowCSS = bgColor => css`
+const PopoverArrowCSS = (bgCl, arrowSize) => css`
     ${displayNone};
     ${positionAbsolute};
     ${parseWidthHeight(0)};
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid ${bgColor};
+    ${borderBottom(arrowSize, bgCl)};
+    border-left: ${arrowSize}px solid transparent;
+    border-right: ${arrowSize}px solid transparent;
 `;
 Popover.defaultProps = {
   anchorOrigin: {
@@ -542,7 +537,7 @@ Popover.defaultProps = {
     horizontal: 'center'
   },
   arrow: false,
-  bgColor: systemWhite,
+  bgColor: 'system.white',
   className: '',
   clickOutsideToClose: true,
   fullScreen: true,

package/icons/basic.js

@@ -4295,6 +4295,34 @@ export const PaperZoom = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Pause = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 19H6V5H10V19ZM14 19V5H18V19H14Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 12,
+    height: height || 14,
+    viewBox: "0 0 12 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 14H0V0H4V14ZM8 14V0H12V14H8Z",
+    fill: colors[color] || color
+  }));
+});
 export const Payment = /*#__PURE__*/memo(({
   width,
   height,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.89-beta.2",
+  "version": "1.3.89-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/styles/general.js

@@ -74,6 +74,9 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const bottom = vl => css`
+    bottom: ${parseCSSValue(vl)};
+`;
 const boxBorder = css`
     box-sizing: border-box;
 `;
@@ -217,6 +220,9 @@ const justifyEvenly = css`
 const justifyStart = css`
     justify-content: flex-start;
 `;
+const left = vl => css`
+    left: ${parseCSSValue(vl)};
+`;
 const mg = vl => css`
     margin: ${getSpacing(vl)};
 `;
@@ -353,6 +359,18 @@ const positionRelative = css`
 const positionSticky = css`
     position: sticky;
 `;
+const right = vl => css`
+    right: ${parseCSSValue(vl)};
+`;
+const scale = vl => css`
+    transform: scale(${vl});
+`;
+const scaleX = vl => css`
+    transform: scaleX(${vl});
+`;
+const scaleY = vl => css`
+    transform: scaleY(${vl});
+`;
 const selfCenter = css`
     align-self: center;
 `;
@@ -398,6 +416,9 @@ const textunderline = css`
 const textUppercase = css`
     text-transform: uppercase;
 `;
+const top = vl => css`
+    top: ${parseCSSValue(vl)};
+`;
 const truncate = css`
     overflow: hidden;
     text-overflow: ellipsis;
@@ -421,4 +442,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };