@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-48d0ef7-31102024

package/CheckboxGroupWithSearch/index.js

@@ -1,280 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { n as noop } from '../index-5f37f281.js';
-import useKeyDown from '../hooks/useKeyDown.js';
-import { c as checkboxRadioSwitcherConfig, n as noDataConfig } from '../configs-00612ce0.js';
-import CustomScrollbar from '../Scrollbar/index.js';
-import Button from '../Button/index.js';
-import Empty from '../Empty/index.js';
-import ExtendedInput from '../ExtendedInput/index.js';
-import CheckboxGroup from '../CheckboxGroup/index.js';
-import '../index-fcbae78d.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-import '../Icon/index.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../SuggestionList/index.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-c7646e48.js';
-import '../GeneUIProvider/index.js';
-import '../Checkbox/index.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .checkbox-group-with-search-holder{background:var(--background);width:100%}[data-gene-ui-version=\"2.16.4\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.16.4\"] .c-g-w-s-content{background:rgba(var(--background-sc-rgb),.01);display:flex;flex-direction:column;width:100%}[data-gene-ui-version=\"2.16.4\"] .c-g-w-s-content>li{display:flex;width:100%}[data-gene-ui-version=\"2.16.4\"] .c-g-w-s-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);padding:1.5rem}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .c-g-w-s-footer>*+*{margin-inline-start:1rem}[data-gene-ui-version=\"2.16.4\"] .c-g-w-s-body-content{max-height:31rem;padding:1.5rem 0;width:100%}[data-gene-ui-version=\"2.16.4\"] .grouped-checkbox-with-search{flex-direction:column}[data-gene-ui-version=\"2.16.4\"] .grouped-checkbox-with-search>div{padding:1rem!important}@media (hover:hover){[data-gene-ui-version=\"2.16.4\"] .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: PropTypes.string,
-  /** Text for cancel button * */
-  cancelText: PropTypes.string,
-  /** Save button click callback * */
-  onSave: PropTypes.func,
-  /** Cancel button click callback * */
-  onCancel: PropTypes.func,
-  /** Search input on change callback * */
-  onSearch: PropTypes.func,
-  /** Initially selected value */
-  defaultSelected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])),
-  /**
-   * Disables events
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Disables save button
-   */
-  disableSave: PropTypes.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: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-    label: PropTypes.node,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-    disabled: PropTypes.bool,
-    description: PropTypes.string,
-    readOnly: PropTypes.bool,
-    required: PropTypes.bool,
-    isValid: PropTypes.bool,
-    errorText: PropTypes.string
-  })])),
-  /**
-   * Custom text for checkAll checkbox
-   */
-  checkAllText: PropTypes.string,
-  /**
-   * Displays select all checkbox
-   */
-  showSelectAll: PropTypes.bool,
-  /**
-   * Array of values of the input elements
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-  /**
-   * Fires an event when Checkbox is clicked or "enter" key is pressed
-   * (event: SyntheticEvent) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Additional className which applies to group holder div element
-   */
-  className: PropTypes.string,
-  /**
-   * Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
-   */
-  size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
-  /**
-   * Specify "label" position
-   */
-  labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
-  /**
-   * Specify "label" alignment
-   */
-  labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
-  /**
-   * Description for checkboxes
-   */
-  description: PropTypes.string,
-  /**
-   * Define is field read only or no.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Define is field required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * Additional state for field validation
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Text that will be shown id field is invalid
-   */
-  errorText: PropTypes.string,
-  /**
-   * Different types/views for no data view
-   */
-  noDataTypes: PropTypes.oneOf(noDataConfig),
-  /**
-   * Showing no data with image
-   */
-  noDataWithImage: PropTypes.bool,
-  /**
-   * Custom No data text
-   */
-  noDataText: PropTypes.string,
-  /*
-   * When rendering a component, the search field will automatically focused
-   */
-  autofocusSearchField: PropTypes.bool,
-  /*
-   * Loader for save button
-   */
-  isSaveButtonLoading: PropTypes.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/index.js

@@ -1,195 +0,0 @@
-import React__default, { useMemo, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { a as conflictPropsLog } from '../index-5f37f281.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import { c as classnames } from '../index-031ff73c.js';
-import Icon from '../Icon/index.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.16.4\"] .accordion-holder{overflow:hidden;width:100%}[data-gene-ui-version=\"2.16.4\"] .accordion-holder.a-minimal:not(.active)+.a-minimal{margin:1.5rem 0 0}[data-gene-ui-version=\"2.16.4\"] .accordion-holder.a-minimal.active .accordion-head-arrow{transform:rotate(180deg)}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .accordion-holder.a-default{border:1px solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.4\"] .accordion-holder.a-default+.a-default{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.4\"] .accordion-holder.a-default:first-of-type{border-top-left-radius:1rem;border-top-right-radius:1rem}[data-gene-ui-version=\"2.16.4\"] .accordion-holder.a-default:last-of-type{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .accordion-holder.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .a-default>.accordion-head{background:rgba(var(--background-sc-rgb),.02);height:4rem;padding:0 1.2rem}[data-gene-ui-version=\"2.16.4\"] .a-default>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .a-default>.accordion-head>li.ellipsis-text{flex:auto}[data-gene-ui-version=\"2.16.4\"] .a-minimal>.accordion-head>li{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .a-minimal>.accordion-head>li.line{flex:auto}[data-gene-ui-version=\"2.16.4\"] .a-minimal>.accordion-head .line{background:rgba(var(--background-sc-rgb),.1);height:1px}[data-gene-ui-version=\"2.16.4\"] .accordion-head .accordion-head-arrow{transition:transform .3s}[data-gene-ui-version=\"2.16.4\"] .accordion-body{font:1.2rem/1.33 var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .a-default .accordion-body{padding:1rem 2rem}[data-gene-ui-version=\"2.16.4\"] .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: PropTypes.oneOf(appearances$1),
-  /**
-   * Disabled state of Panel. Note it will set css "pointer-events" to "none" when set to "true"
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Panel is opened when set to "true". Note that you must not specify this prop in Panel itself
-   */
-  opened: PropTypes.bool,
-  /**
-   * Use this prop to specify Panel's title. Any valid React node
-   */
-  title: PropTypes.node,
-  /**
-   * Use this prop to specify Panel's content. Any valid React node
-   */
-  children: PropTypes.node,
-  /**
-   * Fires an event on Panel click((event: Event) => void)
-   */
-  onClick: PropTypes.func,
-  /**
-   * Same as Collapse. Note that you must not specify this prop in Panel itself
-   */
-  expandIcon: PropTypes.func,
-  /**
-   * Hides the Panel icon when set to "false"
-   */
-  showIcon: PropTypes.bool,
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Right action bar. Any valid React node
-   */
-  rightAction: PropTypes.node
-};
-Panel.defaultProps = {
-  disabled: false,
-  showIcon: true
-};
-
-const deepCheck = children => {
-  Array.from(children).every(child => {
-    Array.isArray(child) && deepCheck(child);
-    return PropTypes.shape({
-      type: PropTypes.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: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Provide default state of opened "Panel"-s. Note that using this key does not mean to control Collapse
-   */
-  defaultActiveKeys: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Fires an event on Panel click((arrayOfKeys: string[]) => void)
-   */
-  onChange: PropTypes.func,
-  /**
-   * Collapse appearance
-   */
-  appearance: PropTypes.oneOf(appearances),
-  /**
-   * Only one "Panel" can be opened at a time when set to "true"
-   */
-  accordion: PropTypes.bool,
-  /**
-   * Use this prop to override default icons of "Panel"(opened: boolean) => ReactElement
-   */
-  expandIcon: PropTypes.func,
-  /**
-   * All 'Panel'-s are open/close by this prop
-   */
-  allActive: PropTypes.bool
-};
-Collapse.defaultProps = {
-  appearance: appearances[1],
-  accordion: false,
-  defaultActiveKeys: [],
-  allActive: false
-};
-
-export { Collapse, Panel };