colibri-ui 0.7.78 → 0.7.80

package/Accordion/Accordion.module.css

@@ -0,0 +1,51 @@
+.root {
+  overflow: hidden;
+  padding: 14px;
+}
+
+.content {
+  block-size: 0;
+  overflow: hidden;
+  transition: block-size 0.2s ease-in-out;
+}
+
+.button {
+  align-items: center;
+  background: none;
+  border: none;
+  color: initial;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 8px;
+  inline-size: 100%;
+  outline: none;
+  padding: 0;
+}
+.button svg {
+  flex: none;
+}
+
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header {
+  margin-block-end: 14px;
+}
+
+.chevron {
+  transition: transform 0.2s ease-in-out;
+}
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.line {
+  background-color: var(--palette-bg-3);
+  block-size: 1px;
+  flex: 1;
+  margin-inline-start: 8px;
+}

package/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, PropsWithChildren } from "react";
+type Props = {
+    title: ReactNode;
+    className?: string;
+    boldTitle?: boolean;
+    tabIndex?: number;
+};
+declare const Accordion: FC<PropsWithChildren<Props>>;
+export default Accordion;

package/Accordion/index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+require('../Icons/index.js');
+var index = require('../Typography/index.js');
+var styles = require('./Accordion.module.css');
+var Chevron = require('../Icons/Chevron.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Accordion = function Accordion(_a) {
+  var title = _a.title,
+    _b = _a.boldTitle,
+    boldTitle = _b === void 0 ? false : _b,
+    children = _a.children,
+    className = _a.className,
+    tabIndex = _a.tabIndex;
+  var _c = React.useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var contentRef = React.useRef(null);
+  var toggleAccordion = function toggleAccordion() {
+    return setIsOpen(!isOpen);
+  };
+  React.useEffect(function () {
+    if (contentRef.current) {
+      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("root", className)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("header")
+  }, /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx("button"),
+    onClick: toggleAccordion,
+    type: "button",
+    role: "button",
+    "aria-expanded": isOpen,
+    tabIndex: tabIndex,
+    "aria-label": "Toggle"
+  }, /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+    className: clx("chevron", {
+      chevron_open: isOpen
+    }),
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clx("text"),
+    fontWeight: boldTitle ? "bold" : "normal"
+  }, title), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("line")
+  }))), /*#__PURE__*/React__default.default.createElement("div", {
+    ref: contentRef,
+    className: clx("content")
+  }, children));
+};
+
+exports.default = Accordion;

package/Accordion/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Accordion/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Avatar/Avatar.module.css

@@ -1,11 +1,11 @@
 .avatar {
-  transition: border-color 0.15s ease;
   border-radius: 100%;
   box-sizing: border-box;
+  transition: border-color 0.15s ease;
 }
 .avatar_bordered {
-  border: 4px solid transparent;
   background-color: var(--palette-white);
+  border: 4px solid transparent;
 }
 .avatar_bordered:hover {
   border-color: rgba(95, 99, 104, 0.24);

package/Avatar/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { AvatarProps } from './index.props';
+import type { AvatarProps } from "./index.props";
+import type { FC } from "react";
 declare const Avatar: FC<AvatarProps>;
 export default Avatar;

package/Avatar/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var classNames = require('classnames/bind');
 var constants = require('./constants.js');
 var maleCircle = require('./assets/male-circle.svg.js');
 var orgCircle = require('./assets/org-circle.svg.js');
 var styles = require('./Avatar.module.css');
-var classNames = require('classnames/bind');
 var index_props = require('./index.props.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
 var Avatar = /*#__PURE__*/React.memo(function (props) {
@@ -24,7 +24,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     className = props.className,
     bordered = props.bordered,
     _b = props.title,
-    title = _b === void 0 ? '' : _b,
+    title = _b === void 0 ? "" : _b,
     _c = props.accountType,
     accountType = _c === void 0 ? index_props.AccountType.Organization : _c;
   var isOrg = accountType === index_props.AccountType.Organization;
@@ -35,7 +35,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     width: size,
     height: size,
     className: clx(styles__default.default.avatar, {
-      'avatar_bordered': !!bordered
+      avatar_bordered: !!bordered
     }, [className])
   });
 });

package/Avatar/index.props.d.ts

@@ -1,4 +1,4 @@
-import { AvatarSizes } from "./constants";
+import type { AvatarSizes } from "./constants";
 export declare enum AccountType {
     Person = "person",
     Organization = "org"

package/Badge/index.js

@@ -46,7 +46,7 @@ var Badge = function Badge(_a) {
     className: clx((_b = {
       root: true
     }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
-    "data-cy": "badge"
+    "data-testid": "badge"
   }, displayValue));
 };
 

package/Button/Button.module.css

@@ -175,7 +175,7 @@
 }
 
 .text {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/Button/index.js

@@ -28,7 +28,8 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children,
     disabled = _a.disabled,
     onClick = _a.onClick,
-    props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick"]);
+    type = _a.type,
+    props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type"]);
   return /*#__PURE__*/React__default.default.createElement("button", tslib.__assign({
     onClick: onClick,
     ref: ref,
@@ -37,7 +38,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       root_fullWidth: !!fullWidth
     }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
     disabled: disabled,
-    "data-cy": "button"
+    "data-cy": "button",
+    type: type || "button",
+    role: "button"
   }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.icon)
   }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {

package/Button/index.props.d.ts

@@ -9,4 +9,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconEnd?: ReactNode;
     size?: ButtonSize;
     disabled?: boolean;
+    type?: "submit" | "reset" | "button" | undefined;
 }

package/Calendar/components/Month/Month.js

@@ -126,6 +126,8 @@ var Month = function Month(props) {
         style: {
           background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
         },
+        role: "button",
+        type: "button",
         onClick: day.isActive ? function () {
           return props.onDayClick([year, month, leadingZeros.leadingZeros(day.day, 2)].join("-"));
         } : undefined

package/Calendar/index.js

@@ -152,7 +152,7 @@ var Calendar = function Calendar(_a) {
     className: clx(styles__default.default.root),
     "data-component": "Calendar",
     ref: $root
-  }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? ( /*#__PURE__*/React__default.default.createElement("div", {
+  }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
     "data-component": "Months",
     className: clx(styles__default.default.months),
     style: {
@@ -169,26 +169,32 @@ var Calendar = function Calendar(_a) {
     return /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({}, attrs, {
       key: "month-".concat(index)
     }));
-  }))) : ( /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
+  }))) : (/*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
     today: today,
     startDate: getMonthStartDate(currentMonthOffset),
     offsetLeft: 0
   }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
     onClick: showPrevMonth,
-    disabled: currentMonthOffset <= 0
+    disabled: currentMonthOffset <= 0,
+    type: "button",
+    role: "button",
+    "aria-label": "Prev"
   }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
     className: clx(styles__default.default["month-control-prev-arrow"])
   })), /*#__PURE__*/React__default.default.createElement("button", {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
-    disabled: currentMonthOffset >= 11
+    disabled: currentMonthOffset >= 11,
+    type: "button",
+    role: "button",
+    "aria-label": "Next"
   }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
     className: clx(styles__default.default["month-control-next-arrow"])
-  }))), datePresets && ( /*#__PURE__*/React__default.default.createElement(index$2.Presets, {
+  }))), datePresets && (/*#__PURE__*/React__default.default.createElement(index$2.Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect
-  })), withContinueButton && ( /*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
+  })), withContinueButton && (/*#__PURE__*/React__default.default.createElement(index$3.ContinueButton, {
     isChanged: selectedDate !== initialSelectedDate || selectedPeriod !== initialSelectedPeriod,
     selectedDate: selectedDate,
     selectedPeriod: selectedPeriod,

package/Checkbox/index.js

@@ -52,7 +52,7 @@ var Checkbox = function Checkbox(_a) {
   }, label)));
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root)
-  }, control, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, control, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
     variant: isError ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/Chip/index.js

@@ -38,7 +38,7 @@ var Chip = function Chip(props) {
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("content-inner")
-  }, children)), iconOnRight && ( /*#__PURE__*/React__default.default.createElement("span", {
+  }, children)), iconOnRight && (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx("icon-right"),
     onClick: onIconOnRightClick || onClick
   }, iconOnRight))));

package/Dropdown/index.js

@@ -4,19 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var classNames = require('classnames/bind');
 var reactPopper = require('react-popper');
-var classNames = require('classnames');
 var index = require('../Portal/index.js');
 var on = require('../helpers/on.js');
 var index$1 = require('../ClickOutside/index.js');
-var dropDownStyles = require('./Dropdown.module.css');
+var styles = require('./Dropdown.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
-var dropDownStyles__default = /*#__PURE__*/_interopDefault(dropDownStyles);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+var clx = classNames__default.default.bind(styles__default.default);
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
     zIndex = _a.zIndex,
@@ -122,12 +123,12 @@ var Dropdown = function Dropdown(_a) {
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
     ref: setControlElement,
     tabIndex: 0
-  }, reference.props)), isVisible && ( /*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+  }, reference.props)), isVisible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
     ref: setPopperElement,
-    "data-component": "popper-container",
-    className: classNames__default.default(dropDownStyles__default.default["popper-container"]),
+    "data-testid": "popper-container",
+    className: clx("popper-container"),
     style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
@@ -136,7 +137,8 @@ var Dropdown = function Dropdown(_a) {
     }),
     tabIndex: 0
   }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(dropDownStyles__default.default["overlay-container"]),
+    "data-testid": "overlay-container",
+    className: clx("overlay-container"),
     onClick: onClickOverlay
   }, overlay))))));
 };

package/InputRadio/index.js

@@ -66,7 +66,7 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
     className: clx(styles__default.default.icon)
   }), /*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.text)
-  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "p",
     size: "s",
     className: clx(styles__default.default.note)

package/Menu/components/MenuItem/index.js

@@ -26,8 +26,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1)" : ""
+      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
     },
+    "data-testid": "menuitem",
     className: clx("item", (_b = {
       item_disabled: !!disabled
     }, _b["item_variant_".concat(variant)] = !!variant, _b), className),

package/Menu/index.js

@@ -21,7 +21,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children;
   var renderChild = React.useMemo(function () {
     return React.Children.map(children, function (child) {
-      if ( /*#__PURE__*/React.isValidElement(child)) {
+      if (/*#__PURE__*/React.isValidElement(child)) {
         var isSelected = selected ? selected.includes(String(child.key)) : undefined;
         var onClickHandler = function onClickHandler(e) {
           if (child.props.onClick) child.props.onClick(e);

package/Modal/index.js

@@ -57,11 +57,11 @@ var Modal = function Modal(_a) {
       "modal-wrapper_mobile": !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
-  }, title ? ( /*#__PURE__*/React__default.default.createElement("div", {
+  }, title ? (/*#__PURE__*/React__default.default.createElement("div", {
     className: clx("title-wrapper")
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
-  }))) : ( /*#__PURE__*/React__default.default.createElement("div", {
+  }))) : (/*#__PURE__*/React__default.default.createElement("div", {
     className: clx("close-wrapper")
   }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler

package/Select/components/MenuOverlay/index.js

@@ -39,9 +39,11 @@ var MenuOverlay = function MenuOverlay(_a) {
     if (!rootRef || !rootRef.current) {
       return;
     }
-    rootRef.current.scrollTo({
-      top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
-    });
+    if (typeof rootRef.current.scrollTo === "function") {
+      rootRef.current.scrollTo({
+        top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
+      });
+    }
   }, [scrollView, rootRef]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: rootRef,

package/Select/index.js

@@ -83,8 +83,8 @@ var Select = function Select(_a) {
     disabled: !!disabled
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-input"]),
-    "data-component": "base-input"
-  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : ( /*#__PURE__*/React__default.default.createElement("span", {
+    "data-testid": "base-input"
+  }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",

package/Theme/colors/common.js

@@ -9,11 +9,11 @@ var Common = {
   BLACK: "#000"
 };
 var Backgrounds = {
-  BG_1: "#f2f2f2",
-  BG_2: "#e6e6e6",
-  BG_3: "#dbdbdb",
-  BG_4: "#b3b3b3",
-  BG_5: "#999"
+  BG_1: "#ECEEF2",
+  BG_2: "#E4E6EA",
+  BG_3: "#D6D9E0",
+  BG_4: "#C9CDD6",
+  BG_5: "#BCC1CC"
 };
 var Accents = {
   ALERT: "#ff564e",

package/Tooltip/index.js

@@ -92,7 +92,7 @@ var Tooltip = function Tooltip(_a) {
   }, [update, visible]);
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
     ref: setControlElement
-  }, reference.props)), visible && ( /*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+  }, reference.props)), visible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
     className: clx("root", {

package/Tooltip/index.props.d.ts

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
 import type { PositioningStrategy } from "@popperjs/core";
 import type { Placement as PopperPlacement } from "@popperjs/core";
-export type Trigger = "hover";
 export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
 export interface ITooltipProps {
     children: ReactNode;

package/base/FormField/index.js

@@ -24,12 +24,12 @@ var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.container, className),
     ref: ref
-  }, label && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
     className: clx(styles__default.default.label, {
       label_required: !!required
     }),
     tag: "label"
-  }, label)), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/base/InputRoot/index.js

@@ -27,7 +27,7 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
     className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
-  }, startIcon && ( /*#__PURE__*/React__default.default.createElement("div", {
+  }, startIcon && (/*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-icon"])
   }, startIcon)), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default["base-icon"])

package/esm/Accordion/Accordion.module.css

@@ -0,0 +1,51 @@
+.root {
+  overflow: hidden;
+  padding: 14px;
+}
+
+.content {
+  block-size: 0;
+  overflow: hidden;
+  transition: block-size 0.2s ease-in-out;
+}
+
+.button {
+  align-items: center;
+  background: none;
+  border: none;
+  color: initial;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 8px;
+  inline-size: 100%;
+  outline: none;
+  padding: 0;
+}
+.button svg {
+  flex: none;
+}
+
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header {
+  margin-block-end: 14px;
+}
+
+.chevron {
+  transition: transform 0.2s ease-in-out;
+}
+.chevron_open {
+  transform: rotate(180deg);
+}
+
+.line {
+  background-color: var(--palette-bg-3);
+  block-size: 1px;
+  flex: 1;
+  margin-inline-start: 8px;
+}

package/esm/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, PropsWithChildren } from "react";
+type Props = {
+    title: ReactNode;
+    className?: string;
+    boldTitle?: boolean;
+    tabIndex?: number;
+};
+declare const Accordion: FC<PropsWithChildren<Props>>;
+export default Accordion;

package/esm/Accordion/index.js

@@ -0,0 +1,57 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames/bind';
+import '../Icons/index.js';
+import Typography from '../Typography/index.js';
+import styles from './Accordion.module.css';
+import Chevron from '../Icons/Chevron.js';
+
+var clx = classNames.bind(styles);
+var Accordion = function Accordion(_a) {
+  var title = _a.title,
+    _b = _a.boldTitle,
+    boldTitle = _b === void 0 ? false : _b,
+    children = _a.children,
+    className = _a.className,
+    tabIndex = _a.tabIndex;
+  var _c = useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var contentRef = useRef(null);
+  var toggleAccordion = function toggleAccordion() {
+    return setIsOpen(!isOpen);
+  };
+  useEffect(function () {
+    if (contentRef.current) {
+      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx("root", className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clx("header")
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: clx("button"),
+    onClick: toggleAccordion,
+    type: "button",
+    role: "button",
+    "aria-expanded": isOpen,
+    tabIndex: tabIndex,
+    "aria-label": "Toggle"
+  }, /*#__PURE__*/React__default.createElement(Chevron, {
+    className: clx("chevron", {
+      chevron_open: isOpen
+    }),
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/React__default.createElement(Typography, {
+    className: clx("text"),
+    fontWeight: boldTitle ? "bold" : "normal"
+  }, title), /*#__PURE__*/React__default.createElement("div", {
+    className: clx("line")
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    className: clx("content")
+  }, children));
+};
+
+export { Accordion as default };