armtek-uikit-react 1.0.75 → 1.0.76

package/assets/Accordion.scss

@@ -0,0 +1,12 @@
+@import "variables";
+
+.AccordionHead{
+  position: relative;
+  padding-right: 40px;
+}
+.AccordionToggle{
+  position: absolute;
+  right: var(--size-step);
+  top:50%;
+  transform: translateY(-50%);
+}

package/assets/Dropdown.scss

@@ -4,8 +4,11 @@
 .Dropdown {
 
   &__ContentWrapper {
+    &_hidden{
+      display: none;
+    }
     &Enter {
-      //opacity: 0;
+      opacity: 0;
       overflow: hidden;
       max-height: 0;
     }

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.75","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.76","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { DropDownProps } from '../Dropdown';
+type ClassNames = 'AccordionHead' | 'AccordionBody' | 'AccordionTitle' | 'AccordionToggle';
+type OwnProps = {
+    title: string | ReactNode;
+    classNames?: Record<ClassNames, string>;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onChange?: () => void;
+    transitionProps?: DropDownProps['transitionProps'];
+    triggerOnIcon?: boolean;
+};
+type AccordionProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
+declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/ui/Accordion/Accordion.js

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from 'react';
+import clsx from 'clsx';
+import css from "./Accordion.module.scss";
+import Dropdown from "../Dropdown";
+import ButtonIcon from "../ButtonIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Accordion = props => {
+  let {
+    title,
+    children,
+    className,
+    classNames,
+    expanded,
+    defaultExpanded,
+    onChange,
+    triggerOnIcon,
+    transitionProps,
+    ...divPops
+  } = props;
+  const [isExpanded, setIsExpanded] = useState(!!defaultExpanded);
+  const openProp = expanded !== undefined ? expanded : isExpanded;
+  const [contentHidden, setContentHidden] = useState(!openProp);
+  const iconCode = openProp ? 'expand_less' : 'expand_more';
+  const handleExpand = () => {
+    if (expanded === undefined) setIsExpanded(prev => !prev);
+    if (onChange) onChange();
+  };
+  const handleHeadClick = () => {
+    if (!triggerOnIcon) handleExpand();
+  };
+  const handleIconClick = e => {
+    e.stopPropagation();
+    handleExpand();
+  };
+  const handleExit = () => {
+    if (!(transitionProps != null && transitionProps.unmountOnExit)) setContentHidden(true);
+    if (transitionProps != null && transitionProps.onExit) transitionProps.onExit();
+  };
+  const handleEnter = isAppearing => {
+    if (!(transitionProps != null && transitionProps.unmountOnExit)) setContentHidden(false);
+    if (transitionProps != null && transitionProps.onEnter) transitionProps.onEnter(isAppearing);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      ...divPops,
+      className: clsx(css.Accordion, className),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: clsx(css.AccordionHead, classNames == null ? void 0 : classNames.AccordionHead),
+        onClick: handleHeadClick,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: clsx(classNames == null ? void 0 : classNames.AccordionTitle),
+          children: title
+        }), /*#__PURE__*/_jsx("div", {
+          className: clsx(classNames == null ? void 0 : classNames.AccordionTitle, css.AccordionToggle),
+          children: /*#__PURE__*/_jsx(ButtonIcon, {
+            onClick: handleIconClick,
+            size: 'small',
+            color: 'neutral',
+            variant: 'transparent',
+            children: /*#__PURE__*/_jsx("span", {
+              className: "mi",
+              children: iconCode
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: clsx(classNames == null ? void 0 : classNames.AccordionBody),
+        children: /*#__PURE__*/_jsx(Dropdown, {
+          transitionProps: {
+            unmountOnExit: true,
+            ...transitionProps,
+            onExit: handleExit,
+            onEnter: handleEnter
+          },
+          expanded: openProp,
+          children: /*#__PURE__*/_jsx("div", {
+            style: {
+              display: contentHidden ? 'none' : 'block'
+            },
+            children: children
+          })
+        })
+      })]
+    })
+  });
+};
+export default Accordion;

package/ui/Accordion/Accordion.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Accordion";

package/ui/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Accordion';
+export * from './Accordion';

package/ui/Accordion/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Accordion";
+export * from "./Accordion";

package/ui/Dropdown/Dropdown.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef } from 'react';
-export type ChipProps = {
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export type DropDownProps = {
     expanded?: boolean;
-    unmountOnExit?: boolean;
+    transitionProps?: Partial<CSSTransitionProps<HTMLElement>>;
 } & ComponentPropsWithoutRef<'div'>;
-declare function Dropdown(props: ChipProps): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown(props: DropDownProps): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/ui/Dropdown/Dropdown.js

@@ -12,7 +12,7 @@ function Dropdown(props) {
     children,
     className,
     expanded,
-    unmountOnExit,
+    transitionProps,
     ...divProps
   } = props;
   const nodeRef = useRef(null);
@@ -25,22 +25,27 @@ function Dropdown(props) {
     children: /*#__PURE__*/_jsx("div", {
       ...divProps,
       className: clsx('Arm-dropdown', css.Dropdown, className),
-      children: /*#__PURE__*/_jsx(CSSTransition, {
-        classNames: {
-          'enter': css.Dropdown__ContentWrapperEnter,
-          'enterActive': css.Dropdown__ContentWrapperEnterActive,
-          'exit': css.Dropdown__ContentWrapperExit,
-          'exitActive': css.Dropdown__ContentWrapperExitActive
-        },
-        in: expanded,
-        nodeRef: nodeRef,
-        timeout: duration,
-        unmountOnExit: unmountOnExit || false,
-        children: /*#__PURE__*/_jsx("div", {
-          ref: nodeRef,
+      children: /*#__PURE__*/_jsx("div", {
+        className: clsx({
+          // [css.Dropdown__ContentWrapper_hidden]: !expanded
+        }),
+        children: /*#__PURE__*/_jsx(CSSTransition, {
+          classNames: {
+            'enter': css.Dropdown__ContentWrapperEnter,
+            'enterActive': css.Dropdown__ContentWrapperEnterActive,
+            'exit': css.Dropdown__ContentWrapperExit,
+            'exitActive': css.Dropdown__ContentWrapperExitActive
+          },
+          in: expanded,
+          timeout: duration,
+          nodeRef: nodeRef,
+          ...transitionProps,
           children: /*#__PURE__*/_jsx("div", {
-            className: css.Dropdown__Content,
-            children: children
+            ref: nodeRef,
+            children: /*#__PURE__*/_jsx("div", {
+              className: css.Dropdown__Content,
+              children: children
+            })
           })
         })
       })