armtek-uikit-react 1.0.74 → 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

@@ -0,0 +1,41 @@
+@import "variables";
+
+
+.Dropdown {
+
+  &__ContentWrapper {
+    &_hidden{
+      display: none;
+    }
+    &Enter {
+      opacity: 0;
+      overflow: hidden;
+      max-height: 0;
+    }
+
+    &EnterActive {
+      opacity: 1;
+      max-height: var(--content-height);
+      transition: opacity 0.3s, max-height 1s cubic-bezier(0, 1, 0, 1);
+    }
+
+    &Exit {
+      opacity: 1;
+      max-height: var(--content-height);
+    }
+
+    &ExitActive {
+      overflow: hidden;
+      opacity: 0;
+      max-height: 0;
+      transition: opacity 0.3s, max-height 1s cubic-bezier(0, 1, 0, 1);
+    }
+  }
+
+  &__Content {
+    overflow: hidden;
+    transition: all 0.3s;
+  }
+
+
+}

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.74","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":"*"},"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

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

package/ui/Dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { CSSTransition } from 'react-transition-group';
+import css from "./Dropdown.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function Dropdown(props) {
+  var _nodeRef$current;
+  const {
+    children,
+    className,
+    expanded,
+    transitionProps,
+    ...divProps
+  } = props;
+  const nodeRef = useRef(null);
+  const contentHeight = (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.scrollHeight;
+  const duration = 1000;
+  useEffect(() => {
+    if (nodeRef.current && contentHeight) nodeRef.current.style.setProperty("--content-height", String(contentHeight) + 'px');
+  }, [contentHeight]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...divProps,
+      className: clsx('Arm-dropdown', css.Dropdown, className),
+      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", {
+            ref: nodeRef,
+            children: /*#__PURE__*/_jsx("div", {
+              className: css.Dropdown__Content,
+              children: children
+            })
+          })
+        })
+      })
+    })
+  });
+}
+export default Dropdown;

package/ui/Dropdown/Dropdown.module.scss

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

package/ui/Dropdown/index.d.ts

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

package/ui/Dropdown/index.js

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