@geneui/components 2.11.1

package/CheckboxGroup.js

@@ -0,0 +1,206 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { c as classnames } from './index-6ff23041.js';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as checkboxRadioSwitcherConfig } from './configs-91c86664.js';
+import { n as noop } from './index-ac59cb10.js';
+import Checkbox from './Checkbox.js';
+import './globalStyling-9c60a159.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+import './style-inject.es-746bb8ed.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+
+function CheckboxGroup(props) {
+  const {
+    defaultSelected,
+    hoveredState,
+    labelAlignment,
+    showSelectAll,
+    labelPosition,
+    checkAllText,
+    description,
+    errorText,
+    className,
+    disabled,
+    onChange,
+    readOnly,
+    required,
+    isValid,
+    data,
+    size,
+    ...restProps
+  } = props;
+  const [valueState, setValueState] = useState(defaultSelected);
+  const isControlled = 'value' in props && props.value;
+  const values = isControlled ? props.value : valueState;
+  useEffect(() => {
+    setValueState(defaultSelected);
+  }, [defaultSelected]);
+  const handleChange = useCallback(e => {
+    const {
+      checked,
+      value
+    } = e.target;
+    const newValues = checked ? values.concat(value) : values.filter(item => item !== value);
+    !isControlled && setValueState(newValues);
+    onChange && onChange(newValues);
+  }, [isControlled, onChange, values]);
+  const handleChangeAll = useCallback(e => {
+    const {
+      checked
+    } = e.target;
+    const newValues = checked ? data.filter(option => !option.disabled).map(option => option.value) : [];
+    !isControlled && setValueState(newValues);
+    onChange && onChange(newValues);
+  }, [data, isControlled, onChange]);
+  const dataLength = data.filter(item => !item.disabled).length;
+  const valuesLength = values.length;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('cha-ra-group', className)
+  }, restProps), showSelectAll && data.length > 1 && /*#__PURE__*/React__default.createElement(Checkbox, {
+    value: "all",
+    disabled: dataLength ? disabled : true,
+    checked: valuesLength === dataLength,
+    indeterminate: valuesLength > 0 && valuesLength < dataLength,
+    onChange: handleChangeAll,
+    label: checkAllText,
+    size: size,
+    labelPosition: labelPosition,
+    labelAlignment: labelAlignment,
+    readOnly: readOnly
+  }), data.map((option, index) => {
+    const isTypeofString = typeof option === 'string';
+    const label = isTypeofString ? option : option.label;
+    const value = isTypeofString ? option : option.value;
+    return /*#__PURE__*/React__default.createElement(Checkbox, {
+      labelTooltip: option.labelTooltip || '',
+      className: classnames(option.className, {
+        active: hoveredState === index
+      }),
+      key: value,
+      disabled: disabled || option.disabled,
+      label: label,
+      value: value,
+      checked: values.includes(value),
+      onChange: handleChange,
+      description: description || option.description,
+      readOnly: readOnly || option.readOnly,
+      required: required || option.required,
+      isValid: !(isValid || option.isValid),
+      errorText: errorText || option.errorText,
+      size: size,
+      labelPosition: labelPosition,
+      labelAlignment: labelAlignment
+    });
+  }));
+}
+CheckboxGroup.propTypes = {
+  /** Initially selected value */
+  defaultSelected: propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number])),
+  /**
+   * Disables events
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * If data item is typeof string than value will apply both as checkbox label and value,
+   * Label: The text of the associated element.
+   * Value: The input value
+   * Disabled: A checkbox can appear disabled and be unable to change states
+   * readOnly: A checkbox can be read-only and unable to change states.
+   * required: If true, the input element will be required.
+   * labelTooltip: Tooltip for label.
+   * description: Checkbox description.
+   * isValid: Check validity of input value
+   * errorText: Displays custom error text when input value is not valid
+   */
+  data: propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.string, propTypesExports.shape({
+    label: propTypesExports.node,
+    value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number]),
+    disabled: propTypesExports.bool,
+    description: propTypesExports.string,
+    labelTooltip: propTypesExports.string,
+    readOnly: propTypesExports.bool,
+    required: propTypesExports.bool,
+    isValid: propTypesExports.bool,
+    errorText: propTypesExports.string
+  })])),
+  /**
+   * Custom text for checkAll checkbox
+   */
+  checkAllText: propTypesExports.string,
+  /**
+   * Displays select all checkbox
+   */
+  showSelectAll: propTypesExports.bool,
+  /**
+   * Array of values of the input elements
+   */
+  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number]),
+  /**
+   * Fires an event when Checkbox is clicked or "enter" key is pressed
+   * (event: SyntheticEvent) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Additional className which applies to group holder div element
+   */
+  className: propTypesExports.string,
+  /**
+   * Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
+   */
+  size: propTypesExports.oneOf(checkboxRadioSwitcherConfig.size),
+  /**
+   * Specify "label" position
+   */
+  labelPosition: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelPosition),
+  /**
+   * Specify "label" alignment
+   */
+  labelAlignment: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
+  /**
+   * Description for checkboxes
+   */
+  description: propTypesExports.string,
+  /**
+   * Define is field read only or no.
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * Define is field required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * Additional state for field validation
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Text that will be shown id field is invalid
+   */
+  errorText: propTypesExports.string
+};
+CheckboxGroup.defaultProps = {
+  defaultSelected: [],
+  disabled: false,
+  showSelectAll: true,
+  data: [],
+  description: '',
+  checkAllText: 'Select All',
+  readOnly: false,
+  required: false,
+  isValid: true,
+  onChange: noop,
+  errorText: '',
+  size: checkboxRadioSwitcherConfig.size[0],
+  labelPosition: checkboxRadioSwitcherConfig.labelPosition[0],
+  labelAlignment: checkboxRadioSwitcherConfig.labelAlignment[0]
+};
+
+export { CheckboxGroup as default };

package/CheckboxGroupWithSearch.js

@@ -0,0 +1,279 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { c as classnames } from './index-6ff23041.js';
+import { n as noop } from './index-b7a33c58.js';
+import './dateValidation-67caec66.js';
+import 'react-dom';
+import { u as useKeyDown } from './useKeyDown-38102ae7.js';
+import './configs-91c86664.js';
+import { checkboxRadioSwitcherConfig, noDataConfig } from './configs.js';
+import CheckboxGroup from './CheckboxGroup.js';
+import ExtendedInput from './ExtendedInput.js';
+import CustomScrollbar from './Scrollbar.js';
+import Button from './Button.js';
+import Empty from './Empty.js';
+import './index-a59530cd.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './_commonjsHelpers-24198af3.js';
+import './index-ac59cb10.js';
+import './Checkbox.js';
+import './Tooltip.js';
+import './Popover-f4d1cac0.js';
+import './useDeviceType-dd51db38.js';
+import './useWindowSize-80369d76.js';
+import './GeneUIProvider.js';
+import './globalStyling-9c60a159.js';
+import './checkboxRadioSwitcher-5b69d7bd.js';
+import './guid-8ddf77b3.js';
+import './index-5cea9a7d.js';
+import './useClickOutside-5183e396.js';
+import './Icon.js';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .checkbox-group-with-search-holder{background:var(--background);width:100%}[data-gene-ui-version=\"2.11.0\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-content{background:rgba(var(--background-sc-rgb),.01);display:flex;flex-direction:column;width:100%}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-content>li{display:flex;width:100%}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);padding:1.5rem}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 0}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-footer>*+*{margin-inline-start:1rem}[data-gene-ui-version=\"2.11.0\"] .c-g-w-s-body-content{max-height:31rem;padding:1.5rem 0;width:100%}[data-gene-ui-version=\"2.11.0\"] .grouped-checkbox-with-search{flex-direction:column}[data-gene-ui-version=\"2.11.0\"] .grouped-checkbox-with-search>div{padding:1rem!important}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .checkbox-group-with-search-holder .crs-holder.active{background:rgba(var(--background-sc-rgb),.05)}}";
+styleInject(css_248z);
+
+function CheckboxGroupWithSearch(_ref) {
+  let {
+    className,
+    onSave,
+    onCancel,
+    saveText,
+    cancelText,
+    onSearch,
+    value,
+    defaultSelected,
+    onChange,
+    data: options,
+    noDataText,
+    noDataWithImage,
+    noDataTypes,
+    disableSave,
+    autofocusSearchField,
+    isSaveButtonLoading,
+    ...rest
+  } = _ref;
+  const parentRef = useRef(null);
+  const scrollbarRef = useRef(null);
+  const [query, setQuery] = useState('');
+  const [data, setData] = useState(options);
+  const [values, setValues] = useState(defaultSelected);
+  const [hoveredState, setHoveredState] = useState(-1);
+  const handleSearchChange = useCallback(e => {
+    const {
+      value
+    } = e.target;
+    onSearch ? onSearch(e) : setData(() => options.filter(item => !value || item.label.toLowerCase().includes(value.toLowerCase())));
+    setQuery(value);
+  }, [onSearch, options]);
+  const handleChange = useCallback(e => {
+    setValues(e);
+    onChange(e);
+  }, [onChange]);
+  function scroll(type, index) {
+    let newIndex = index;
+    if (type === 'prev' && data.length - 1 > index) {
+      newIndex++;
+    } else if (type === 'next' && index !== 0) {
+      newIndex--;
+    }
+    scrollbarRef.current.scrollTop(newIndex * Math.round(scrollbarRef.current.getScrollHeight() / data.length));
+    return newIndex;
+  }
+  useKeyDown(e => {
+    if (e.key === 'ArrowDown') {
+      setHoveredState(index => scroll('prev', index));
+    }
+    if (e.key === 'ArrowUp') {
+      setHoveredState(index => scroll('next', index));
+    }
+    if (e.key === 'Enter') {
+      onChange(e, hoveredState);
+      if (!value && data.length && hoveredState >= 0) {
+        setValues(v => {
+          const index = v.indexOf(data[hoveredState].value);
+          const newValues = [...v];
+          index > -1 ? newValues.splice(index, 1) : newValues.push(data[hoveredState].value);
+          return newValues;
+        });
+      }
+    }
+  }, [data, hoveredState, onChange], parentRef, ['ArrowUp', 'ArrowDown', 'Enter']);
+  useEffect(() => {
+    setData(options);
+  }, [options]);
+  useEffect(() => {
+    value && setValues(value);
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
+    className: classnames('checkbox-group-with-search-holder', className)
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "c-g-w-s-content"
+  }, /*#__PURE__*/React__default.createElement("li", {
+    className: "c-g-w-s-head"
+  }, /*#__PURE__*/React__default.createElement(ExtendedInput, {
+    autoFocus: autofocusSearchField,
+    value: query,
+    type: "search",
+    onChange: handleSearchChange,
+    icon: "bc-icon-search"
+  })), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(CustomScrollbar, {
+    ref: scrollbarRef,
+    autoHeight: true
+  }, data.length ? /*#__PURE__*/React__default.createElement("div", {
+    className: "c-g-w-s-body-content"
+  }, /*#__PURE__*/React__default.createElement(CheckboxGroup, _extends({
+    hoveredState: hoveredState,
+    className: "grouped-checkbox-with-search",
+    data: data,
+    value: values,
+    onChange: handleChange
+  }, rest))) : /*#__PURE__*/React__default.createElement("div", {
+    className: "empty-data-holder"
+  }, /*#__PURE__*/React__default.createElement(Empty, {
+    title: noDataText,
+    appearance: "greyscale",
+    withImage: noDataWithImage,
+    className: "absolute",
+    type: noDataTypes,
+    size: "small"
+  })))), /*#__PURE__*/React__default.createElement("li", {
+    className: "c-g-w-s-footer"
+  }, onCancel && /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "minimal",
+    color: "default",
+    onClick: onCancel
+  }, cancelText), onSave && /*#__PURE__*/React__default.createElement(Button, {
+    disabled: disableSave || isSaveButtonLoading,
+    onClick: onSave,
+    loading: isSaveButtonLoading
+  }, saveText))));
+}
+CheckboxGroupWithSearch.propTypes = {
+  /** Text for save button * */
+  saveText: propTypesExports.string,
+  /** Text for cancel button * */
+  cancelText: propTypesExports.string,
+  /** Save button click callback * */
+  onSave: propTypesExports.func,
+  /** Cancel button click callback * */
+  onCancel: propTypesExports.func,
+  /** Search input on change callback * */
+  onSearch: propTypesExports.func,
+  /** Initially selected value */
+  defaultSelected: propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number])),
+  /**
+   * Disables events
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Disables save button
+   */
+  disableSave: propTypesExports.bool,
+  /**
+   * If data item is typeof string than value will apply both as checkbox label and value,
+   * Label: The text of the associated element.
+   * Value: The input value
+   * Disabled: A checkbox can appear disabled and be unable to change states
+   * readOnly: A checkbox can be read-only and unable to change states.
+   * required: If true, the input element will be required.
+   * isValid: Check validity of input value
+   * errorText: Displays custom error text when input value is not valid
+   */
+  data: propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.string, propTypesExports.shape({
+    label: propTypesExports.node,
+    value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number]),
+    disabled: propTypesExports.bool,
+    description: propTypesExports.string,
+    readOnly: propTypesExports.bool,
+    required: propTypesExports.bool,
+    isValid: propTypesExports.bool,
+    errorText: propTypesExports.string
+  })])),
+  /**
+   * Custom text for checkAll checkbox
+   */
+  checkAllText: propTypesExports.string,
+  /**
+   * Displays select all checkbox
+   */
+  showSelectAll: propTypesExports.bool,
+  /**
+   * Array of values of the input elements
+   */
+  value: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.bool, propTypesExports.number]),
+  /**
+   * Fires an event when Checkbox is clicked or "enter" key is pressed
+   * (event: SyntheticEvent) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Additional className which applies to group holder div element
+   */
+  className: propTypesExports.string,
+  /**
+   * Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
+   */
+  size: propTypesExports.oneOf(checkboxRadioSwitcherConfig.size),
+  /**
+   * Specify "label" position
+   */
+  labelPosition: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelPosition),
+  /**
+   * Specify "label" alignment
+   */
+  labelAlignment: propTypesExports.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
+  /**
+   * Description for checkboxes
+   */
+  description: propTypesExports.string,
+  /**
+   * Define is field read only or no.
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * Define is field required or no.
+   */
+  required: propTypesExports.bool,
+  /**
+   * Additional state for field validation
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Text that will be shown id field is invalid
+   */
+  errorText: propTypesExports.string,
+  /**
+   * Different types/views for no data view
+   */
+  noDataTypes: propTypesExports.oneOf(noDataConfig),
+  /**
+   * Showing no data with image
+   */
+  noDataWithImage: propTypesExports.bool,
+  /**
+   * Custom No data text
+   */
+  noDataText: propTypesExports.string,
+  /*
+   * When rendering a component, the search field will automatically focused
+   */
+  autofocusSearchField: propTypesExports.bool,
+  /*
+   * Loader for save button
+   */
+  isSaveButtonLoading: propTypesExports.bool
+};
+CheckboxGroupWithSearch.defaultProps = {
+  onSave: noop,
+  onCancel: noop,
+  saveText: 'Save',
+  cancelText: 'Cancel',
+  noDataText: 'No data found',
+  noDataWithImage: true,
+  noDataTypes: 'image',
+  autofocusSearchField: false
+};
+
+export { CheckboxGroupWithSearch as default };

package/Collapse.js

@@ -0,0 +1,196 @@
+import './globalStyling-9c60a159.js';
+import React__default, { useMemo, useState, useEffect } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { a as conflictPropsLog } from './index-ac59cb10.js';
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { c as classnames } from './index-6ff23041.js';
+import Icon from './Icon.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './dateValidation-67caec66.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .accordion-holder{overflow:hidden;width:100%}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-minimal:not(.active)+.a-minimal{margin:1.5rem 0 0}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-minimal.active .accordion-head-arrow{transform:rotate(180deg)}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-minimal .a-minimal:not(.active) .accordion-head-arrow{transform:rotate(-90deg)}html[dir=rtl] .accordion-holder.a-minimal .a-minimal:not(.active) .accordion-head-arrow{transform:rotate(90deg)}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-default{border:1px solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-default+.a-default{margin:.5rem 0 0}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-default:first-of-type{border-top-left-radius:1rem;border-top-right-radius:1rem}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-default:last-of-type{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.a-default:not(.active) .accordion-head-arrow{transform:rotate(-90deg)}html[dir=rtl] .accordion-holder.a-default:not(.active) .accordion-head-arrow{transform:rotate(90deg)}[data-gene-ui-version=\"2.11.0\"] .accordion-holder.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .accordion-head{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2.4rem var(--font-family);-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .a-default>.accordion-head{background:rgba(var(--background-sc-rgb),.02);height:4rem;padding:0 1.2rem}[data-gene-ui-version=\"2.11.0\"] .a-default>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .a-default>.accordion-head>li+li{margin:0 0 0 1.8rem}html[dir=rtl] .a-default>.accordion-head>li+li{margin:0 1.8rem 0 0}[data-gene-ui-version=\"2.11.0\"] .a-default>.accordion-head>li.ellipsis-text{flex:auto}[data-gene-ui-version=\"2.11.0\"] .a-minimal>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .a-minimal>.accordion-head>li.ellipsis-text{margin:0 1rem 0 .4rem}html[dir=rtl] .a-minimal>.accordion-head>li.ellipsis-text{margin:0 .4rem 0 1rem}[data-gene-ui-version=\"2.11.0\"] .a-minimal>.accordion-head>li.line{flex:auto}[data-gene-ui-version=\"2.11.0\"] .a-minimal>.accordion-head .line{background:rgba(var(--background-sc-rgb),.1);height:1px}[data-gene-ui-version=\"2.11.0\"] .accordion-head .accordion-head-arrow{transition:transform .3s}[data-gene-ui-version=\"2.11.0\"] .accordion-body{font:1.2rem/1.33 var(--font-family)}[data-gene-ui-version=\"2.11.0\"] .a-default .accordion-body{padding:1rem 2rem}[data-gene-ui-version=\"2.11.0\"] .a-minimal .accordion-body{padding:1rem 0 1rem 2.8rem}html[dir=rtl] .a-minimal .accordion-body{padding:1rem 2.8rem 1rem 0}";
+styleInject(css_248z);
+
+const appearances$1 = ['default', 'minimal'];
+function Panel(props) {
+  const {
+    appearance,
+    disabled,
+    opened,
+    title,
+    children,
+    onClick,
+    expandIcon,
+    showIcon,
+    className,
+    rightAction,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
+    className: classnames('accordion-holder', className, "a-".concat(appearance), {
+      disabled,
+      active: opened
+    })
+  }), /*#__PURE__*/React__default.createElement("ul", {
+    className: "accordion-head",
+    onClick: onClick
+  }, showIcon && /*#__PURE__*/React__default.createElement("li", null, expandIcon ? expandIcon(opened, props) : /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-arrow-down",
+    className: "accordion-head-arrow"
+  })), /*#__PURE__*/React__default.createElement("li", {
+    className: "ellipsis-text"
+  }, title), /*#__PURE__*/React__default.createElement("li", {
+    className: "line"
+  }), /*#__PURE__*/React__default.createElement("li", null, rightAction)), opened && /*#__PURE__*/React__default.createElement("div", {
+    className: "accordion-body"
+  }, children));
+}
+Panel.propTypes = {
+  /**
+   * Same as "Collapse" appearance. Note that you must not specify this prop in Panel itself
+   */
+  appearance: propTypesExports.oneOf(appearances$1),
+  /**
+   * Disabled state of Panel. Note it will set css "pointer-events" to "none" when set to "true"
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * Panel is opened when set to "true". Note that you must not specify this prop in Panel itself
+   */
+  opened: propTypesExports.bool,
+  /**
+   * Use this prop to specify Panel's title. Any valid React node
+   */
+  title: propTypesExports.node,
+  /**
+   * Use this prop to specify Panel's content. Any valid React node
+   */
+  children: propTypesExports.node,
+  /**
+   * Fires an event on Panel click((event: Event) => void)
+   */
+  onClick: propTypesExports.func,
+  /**
+   * Same as Collapse. Note that you must not specify this prop in Panel itself
+   */
+  expandIcon: propTypesExports.func,
+  /**
+   * Hides the Panel icon when set to "false"
+   */
+  showIcon: propTypesExports.bool,
+  /**
+   * Additional className
+   */
+  className: propTypesExports.string,
+  /**
+   * Right action bar. Any valid React node
+   */
+  rightAction: propTypesExports.node
+};
+Panel.defaultProps = {
+  disabled: false,
+  showIcon: true
+};
+
+const deepCheck = children => {
+  Array.from(children).every(child => {
+    Array.isArray(child) && deepCheck(child);
+    return propTypesExports.shape({
+      type: propTypesExports.instanceOf(Panel)
+    });
+  });
+};
+
+const appearances = ['default', 'minimal'];
+const getActiveKeys = (activeKeys, key, accordion, isControlled) => !isControlled && accordion ? activeKeys[0] === key ? [] : [key] : activeKeys.includes(key) ? activeKeys.filter(item => item !== key) : [...activeKeys, key];
+function Collapse(props) {
+  const {
+    children,
+    defaultActiveKeys,
+    onChange,
+    appearance,
+    accordion,
+    expandIcon,
+    allActive
+  } = props;
+  const allKeys = useMemo(() => React__default.Children.map(children, _ref => {
+    let {
+      key
+    } = _ref;
+    return key;
+  }), [children]);
+  const isControlled = ('activeKeys' in props);
+  const [activeKeysState, setActiveKeysState] = useState(() => allActive ? allKeys : defaultActiveKeys);
+  const activeKeys = isControlled ? props.activeKeys : activeKeysState;
+  isControlled && accordion && conflictPropsLog('Collapse', ['activeKeys', 'accordion'], true);
+  useEffect(() => {
+    accordion && setActiveKeysState(prev => [prev[0]]);
+  }, [accordion]);
+  useEffect(() => {
+    allActive && setActiveKeysState(allKeys);
+  }, [allActive, allKeys]);
+  return React__default.Children.map(children, (child, index) => {
+    var _childProps$opened;
+    const {
+      key,
+      props: childProps
+    } = child;
+    const handleClick = e => {
+      const newActiveKeys = getActiveKeys(activeKeys, key, accordion, isControlled);
+      !isControlled && setActiveKeysState(newActiveKeys);
+      onChange && onChange(newActiveKeys);
+      childProps.onClick && childProps.onClick(e, childProps, index);
+    };
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      opened: (_childProps$opened = childProps.opened) !== null && _childProps$opened !== void 0 ? _childProps$opened : activeKeys.includes(key),
+      onClick: handleClick,
+      appearance,
+      expandIcon
+    });
+  });
+}
+Collapse.propTypes = {
+  /**
+   * The child or children of Collapse molecule is "Panel"
+   */
+  children: (props, propName, componentName) => deepCheck(props.children),
+  /**
+   * Keys provided in array must correspond the keys which are set on child "Panel"'s. Also they will be opened.
+   * Using this prop means that you are controlling Collapse molecule
+   */
+  activeKeys: propTypesExports.arrayOf(propTypesExports.string),
+  /**
+   * Provide default state of opened "Panel"-s. Note that using this key does not mean to control Collapse
+   */
+  defaultActiveKeys: propTypesExports.arrayOf(propTypesExports.string),
+  /**
+   * Fires an event on Panel click((arrayOfKeys: string[]) => void)
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Collapse appearance
+   */
+  appearance: propTypesExports.oneOf(appearances),
+  /**
+   * Only one "Panel" can be opened at a time when set to "true"
+   */
+  accordion: propTypesExports.bool,
+  /**
+   * Use this prop to override default icons of "Panel"(opened: boolean) => ReactElement
+   */
+  expandIcon: propTypesExports.func,
+  /**
+   * All 'Panel'-s are open/close by this prop
+   */
+  allActive: propTypesExports.bool
+};
+Collapse.defaultProps = {
+  appearance: appearances[1],
+  accordion: false,
+  defaultActiveKeys: [],
+  allActive: false
+};
+
+export { Collapse, Panel };