diginet-core-ui 1.3.36 → 1.3.38

package/components/accordion/css.js

@@ -1,6 +1,10 @@
 import { css } from '@emotion/core';
 import { typography } from '../../styles/typography';
 import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+const {
+  heading3
+} = typography;
 const {
   system: {
     active,
@@ -14,36 +18,37 @@ const {
     pressed
   }
 } = colors;
-export const SummaryRoot = css`
-    display: flex;
-    position: relative;
-    justify-content: space-between;
-    align-items: center;
+export const SummaryRootCSS = css`
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${alignCenter};
+    ${cursorPointer};
+    ${borderBox};
+    ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    cursor: pointer;
-    box-sizing: border-box;
     padding: 16px 24px;
-    border-radius: 4px;
     &.background {
         background-color: ${headerbar};
     }
-    .Accordion-Expand-Icon, .Accordion-Collapse-Icon {
-        cursor: pointer;
+    .Accordion-Expand-Icon,
+    .Accordion-Collapse-Icon {
+        ${cursorPointer};
         color: ${active} !important;
         &:active,
         &:focus,
         &:hover {
+            ${backgroundTransparent};
             color: ${active};
-            background-color: transparent;
         }
     }
     .Accordion-Icon-Root {
-        display: flex;
+        ${flexRow};
         .Accordion-Icon.rotate-able {
+            ${borderBox};
             width: 24px;
             height: 24px;
-            box-sizing: border-box;
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -54,8 +59,8 @@ export const SummaryRoot = css`
         }
     }
     &.start {
-        flex-direction: row-reverse;
-        justify-content: flex-end;
+        ${flexRowReverse};
+        ${justifyEnd};
         .Accordion-Icon.rotate-able {
             margin-right: 8px;
             &.TreeView {
@@ -103,7 +108,7 @@ export const SummaryRoot = css`
         }
     }
     &.disabled {
-        pointer-events: none;
+        ${pointerEventsNone};
         background-color: ${fillDisabled};
         .DGN-UI-Accordion-Summary-Content,
         .Accordion-Expand-Icon {
@@ -111,58 +116,60 @@ export const SummaryRoot = css`
         }
     }
     &.treeview-disabled {
-        pointer-events: none;
+        ${pointerEventsNone};
         &:hover {
-            background-color: transparent;
+            ${backgroundTransparent};
         }
         .TreeView-Item {
             color: ${systemDisabled};
         }
         .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
+            ${cursorPointer};
             pointer-events: initial;
-            cursor: pointer;
         }
     }
     .DGN-UI-Accordion-Summary-Content {
-        display: flex;
-        position: relative;
-        align-items: center;
-        ${typography.heading3};
+        ${heading3};
+        ${flexRow};
+        ${positionRelative};
+        ${alignCenter};
+        ${breakWord};
+        ${userSelectNone};
+        ${borderBox}
         color: ${active};
         width: 100%;
         min-height: 24px;
-        word-break: break-word;
-        user-select: none;
-        box-sizing: border-box;
     }
     .Accordion-Icon {
-        display: inline-block;
-        position: relative;
-        cursor: pointer;
+        ${displayInlineBlock};
+        ${positionRelative};
+        ${cursorPointer};
+        width: 24px;
+        height: 24px;
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
             transition: transform 200ms linear;
             &.effect {
-                position: relative;
+                ${positionRelative};
             }
         }
         .Accordion-Collapse-Icon {
-            position: absolute;
+            ${positionAbsolute};
             inset: 0;
             transform: scale(0);
             transition: transform 200ms linear;
         }
         .effect {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
+            ${inlineFlex};
+            ${justifyCenter};
+            ${alignCenter};
+            ${cursorPointer};
             min-width: 24px;
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
             padding: 3px;
-            cursor: pointer;
         }
     }
 `;

package/components/accordion/details.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, forwardRef, useRef } from 'react';
-import { any, string, node, object } from 'prop-types';
+import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { typography } from "../../styles/typography";
+import { typography } from '../../styles/typography';
 import { color as colors } from '../../styles/colors';
 const {
   paragraph1
@@ -19,54 +19,60 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   style,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  id
+}, reference) => {
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
 
-  const DetailsRoot = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${overflowHidden}
-        height: 0;
-        transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        .DGN-UI-Accordion-Details-Content {
-            ${borderBox}
-            ${paragraph1}
-            padding: 0 24px 16px 24px;
-            color: ${main};
-            &.disabled {
-                ${pointerEventsNone}
-                ${userSelectNone}
-            }
-        }
-    `;
-  return jsx("div", {
-    css: DetailsRoot,
-    className: 'DGN-UI-Accordion-Details',
-    ref: ref,
-    ...props
-  }, jsx("div", {
-    style: style,
-    className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, children));
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: DetailsRootCSS,
+      className: 'DGN-UI-Accordion-Details',
+      ref: ref,
+      id: id
+    }, jsx("div", {
+      style: style,
+      className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, children));
+  }, [style, className, children, id]);
 }));
+const DetailsRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    height: 0;
+    transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    .DGN-UI-Accordion-Details-Content {
+        ${borderBox};
+        ${paragraph1};
+        padding: 0 24px 16px 24px;
+        color: ${main};
+        &.disabled {
+            ${pointerEventsNone}
+            ${userSelectNone}
+        }
+    }
+`;
 AccordionDetails.defaultProps = {
   className: '',
-  style: {}
+  style: {},
+  id: ''
 };
 AccordionDetails.propTypes = {
   /** The element to display in alert like text props (priority) */
-  children: node,
+  children: PropTypes.node,
 
   /** class for De */
-  className: string,
-
-  /** style inline for Detail */
-  style: object,
+  className: PropTypes.string,
 
-  /** any props else */
-  props: any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useRef, forwardRef, Children, cloneElement } from 'react';
+import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
@@ -9,73 +9,9 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   children,
   collapseOther,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
-  const AccordionGroupRoot = css`
-        ${borderRadius4px}
-        .DGN-UI-Accordion {
-            &:first-of-type {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 4px 4px 0px 0px;
-                }
-                &.expanding {
-                    ${borderRadius4px}
-                    margin: 0 0 16px 0;
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:last-child {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 0px 0px 4px 4px;
-                }
-                &.expanding {
-                    ${borderRadius4px}
-                    margin: 16px 0 0 0;
-                    .DGN-UI-Accordion-Summary {
-                        border-radius: 4px 4px 0px 0px;
-                    }
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:not(:first-of-type):not(:last-child) {
-                &,
-                .DGN-UI-Accordion-Summary {
-                    border-radius: 0px;
-                }
-                &.expanding {
-                    margin: 16px 0;
-                    border-radius: 4px;
-                    .DGN-UI-Accordion-Summary {
-                        border-radius: 4px 4px 0px 0px;
-                    }
-                    .DGN-UI-Divider {
-                        display: none !important;
-                    }
-                }
-            }
-            &:not(:last-child) {
-                .DGN-UI-Divider {
-                    display: block !important;
-                }
-                box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
-                &.expanding,
-                &.previousExpanding {
-                    ${borderRadius4px}
-                    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-                }
-            }
-        }
-    `;
+  style
+}, reference) => {
+  const ref = useRef(null);
 
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
@@ -90,18 +26,91 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  return jsx("div", {
-    css: AccordionGroupRoot,
-    ref: ref,
-    ...props,
-    className: 'DGN-UI-Accordion-Group ' + className
-  }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
-    onExpand: e => onCollapseOther(e, child.props.onExpand)
-  })));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: AccordionGroupRootCSS,
+      ref: ref,
+      style: style,
+      className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
+    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      onExpand: e => onCollapseOther(e, child.props.onExpand)
+    })));
+  }, [className, children]);
 }));
+const AccordionGroupRootCSS = css`
+    ${borderRadius4px};
+    .DGN-UI-Accordion {
+        &:first-of-type {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 4px 4px 0px 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 0 0 16px 0;
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:last-child {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px 0px 4px 4px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 16px 0 0 0;
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:first-of-type):not(:last-child) {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: 16px 0;
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:last-child) {
+            .DGN-UI-Divider {
+                display: block !important;
+            }
+            box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
+            &.expanding,
+            &.previousExpanding {
+                ${borderRadius4px};
+                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            }
+        }
+    }
+`;
 AccordionGroup.defaultProps = {
   className: '',
-  collapseOther: true
+  collapseOther: true,
+  style: {}
 };
 AccordionGroup.propTypes = {
   /** collapse other if true */
@@ -113,10 +122,7 @@ AccordionGroup.propTypes = {
   /** insist <Accordion /> */
   children: PropTypes.node.isRequired,
 
-  /** style inline for AccordionGroup */
-  style: PropTypes.object,
-
-  /** any props else */
-  props: PropTypes.any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useState } from 'react';
+import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
@@ -23,27 +23,10 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   boxShadow,
   className,
   children,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  style
+}, reference) => {
+  const ref = useRef(null);
   const [expandState, setExpandState] = useState(expanded || expand);
-  const AccordionRoot = css`
-        ${displayBlock}
-        ${positionRelative}
-        ${borderRadius4px}
-        width: 100%;
-        transition: margin 300ms ease;
-        &.boxShadow {
-            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        }
-        &.disabled {
-            cursor: no-drop;
-            box-shadow: none;
-        }
-    `;
   useEffect(() => {
     if (ref.current) {
       const previous = ref.current.previousElementSibling;
@@ -63,34 +46,60 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  return jsx("div", {
-    css: AccordionRoot,
-    ref: ref,
-    ...props,
-    className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
-  }, jsx(AccordionContext.Provider, {
-    value: {
-      expanded,
-      expandState,
-      disabled,
-      onClickAccordion: onClick ? onClickAccordion : null,
-      onExpand,
-      onCollapse,
-      setExpandState
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      css: AccordionRootCSS,
+      ref: ref,
+      style: style,
+      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(AccordionContext.Provider, {
+      value: {
+        expanded,
+        expandState,
+        disabled,
+        onClickAccordion: onClick ? onClickAccordion : null,
+        onExpand,
+        onCollapse,
+        setExpandState
+      }
+    }, children, jsx(Divider, {
+      color: category,
+      style: {
+        margin: 0,
+        display: 'none'
+      }
+    })));
+  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+}));
+const AccordionRootCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderRadius4px};
+    width: 100%;
+    transition: margin 300ms ease;
+    &.boxShadow {
+        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
     }
-  }, children, jsx(Divider, {
-    color: category,
-    style: {
-      margin: 0,
-      display: 'none'
+    &.disabled {
+        cursor: no-drop;
+        box-shadow: none;
     }
-  })));
-}));
+`;
 Accordion.defaultProps = {
   expand: false,
   disabled: false,
   className: '',
-  boxShadow: true
+  boxShadow: true,
+  style: {}
 };
 Accordion.propTypes = {
   /** prevent all event if true */
@@ -117,10 +126,7 @@ Accordion.propTypes = {
   /** insist <AccordionSummary />, <AccordionDetails /> */
   children: PropTypes.node,
 
-  /** style inline for Accordion */
-  style: PropTypes.object,
-
-  /** any props else */
-  props: PropTypes.any
+  /** style inline of component */
+  style: PropTypes.object
 };
 export default Accordion;