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

package/Counter/index.js

@@ -1,312 +0,0 @@
-import React__default, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { n as noop, s as stopEvent } from '../index-5f37f281.js';
-import useKeyDown from '../hooks/useKeyDown.js';
-import '../configs-00612ce0.js';
-import Button from '../Button/index.js';
-import Label from '../Label/index.js';
-import SkeletonLoader from '../SkeletonLoader/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import ExtendedInput from '../ExtendedInput/index.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 '../_rollupPluginBabelHelpers-a83240e1.js';
-import '../InfoOutline-dd2e89d9.js';
-import '../ArrowLeft-b88e2ba8.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../hooks/useDebounce.js';
-import '../GeneUIProvider/index.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../SuggestionList/index.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../Scrollbar/index.js';
-import '../callAfterDelay-7272faca.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .counter{width:100%}[data-gene-ui-version=\"2.16.4\"] .counter.s-small{--height:2.4rem;--width:var(--height);min-width:8rem}[data-gene-ui-version=\"2.16.4\"] .counter.s-medium{--height:3.6rem;--width:var(--height);min-width:12rem}[data-gene-ui-version=\"2.16.4\"] .counter.s-big{--height:4.2rem;--width:var(--height);min-width:14rem}[data-gene-ui-version=\"2.16.4\"] .counter.r-round .react-loading-skeleton{border-radius:4.2rem}[data-gene-ui-version=\"2.16.4\"] .counter.r-smooth .react-loading-skeleton{border-radius:.4rem}[data-gene-ui-version=\"2.16.4\"] .counter__label{color:rgba(var(--background-sc-rgb),.75);font-size:1.4rem;font-weight:600;margin-bottom:.8rem;opacity:.5}[data-gene-ui-version=\"2.16.4\"] .counter__wrapper{display:flex;gap:.4rem;height:var(--height)}[data-gene-ui-version=\"2.16.4\"] .counter__input{opacity:1!important}[data-gene-ui-version=\"2.16.4\"] .counter__input-holder{display:flex;min-width:var(---width);overflow:hidden;width:100%}[data-gene-ui-version=\"2.16.4\"] .counter__input-holder .react-loading-skeleton{height:var(--height)!important}[data-gene-ui-version=\"2.16.4\"] .counter__input .input-structure{padding:0}[data-gene-ui-version=\"2.16.4\"] .counter__input .input-element{justify-content:center;max-height:var(--height);min-height:var(--height);text-align:center}[data-gene-ui-version=\"2.16.4\"] .counter__input .input-element:disabled{color:rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.16.4\"] .counter__button{height:100%;min-height:100%;min-width:var(--width);width:var(--width)}[data-gene-ui-version=\"2.16.4\"] .counter__button .btn{max-height:100%;max-width:100%;min-height:100%;min-width:100%}[data-gene-ui-version=\"2.16.4\"] .counter__button .skeleton-holder .react-loading-skeleton{height:var(--height)!important;width:var(--width)}";
-styleInject(css_248z);
-
-const keyDownKeys = {
-  arrowUp: 'ArrowUp',
-  arrowDown: 'ArrowDown'
-};
-const inputRadiusMap = {
-  round: 'full-radius',
-  smooth: 'smooth-radius'
-};
-function Counter(_ref) {
-  let {
-    minusTooltipText,
-    plusTooltipText,
-    inputReadOnly,
-    defaultValue,
-    cornerRadius,
-    isLoading,
-    className,
-    minValue,
-    maxValue,
-    readOnly,
-    disabled,
-    onChange,
-    label,
-    value,
-    width,
-    size,
-    step
-  } = _ref;
-  const ref = useRef();
-  const inputRef = useRef();
-  const [showInputTooltip, setShowInputTooltip] = useState(false);
-  const [isTruncated, setIsTruncated] = useState(false);
-  const [data, setData] = useState(defaultValue || 0);
-  const [counterStep, setCounterStep] = useState(step);
-  useEffect(() => setCounterStep(step), [step]);
-  const isMinMaxWrong = useMemo(() => minValue >= maxValue, [minValue, maxValue]);
-  const isControlled = useMemo(() => value === 0 || !!value, [value]);
-  const modifiedSize = useMemo(() => typeof width === 'number' ? "".concat(width, "px") : width, [width]);
-  const isDisableMinus = useMemo(() => +data === minValue, [minValue, data]);
-  const isDisablePlus = useMemo(() => +data === maxValue, [maxValue, data]);
-  const isMinValue = useMemo(() => minValue !== undefined, [minValue]);
-  const isMaxValue = useMemo(() => maxValue !== undefined, [maxValue]);
-  useEffect(() => {
-    if (typeof defaultValue === 'number' && defaultValue <= maxValue && defaultValue >= minValue) {
-      return setData(defaultValue);
-    }
-    if (typeof minValue === 'number' && minValue > defaultValue) {
-      return setData(minValue);
-    }
-  }, [minValue, defaultValue, maxValue]);
-  useEffect(() => {
-    isControlled && setData(value);
-  }, [value]);
-  const setNewValue = useCallback(val => {
-    !isControlled && setData(eventState => (+eventState + +val).toString());
-    onChange((+data + +val).toString());
-  }, [isControlled, data]);
-  const setValueToMin = useCallback(() => {
-    !isControlled && setData(minValue === null || minValue === void 0 ? void 0 : minValue.toString());
-    onChange(minValue === null || minValue === void 0 ? void 0 : minValue.toString());
-  }, [isControlled, minValue]);
-  const setValueToMax = useCallback(() => {
-    !isControlled && setData(maxValue === null || maxValue === void 0 ? void 0 : maxValue.toString());
-    onChange(maxValue === null || maxValue === void 0 ? void 0 : maxValue.toString());
-  }, [isControlled, maxValue]);
-  const handleChange = useCallback(val => {
-    if (isMinValue && isMaxValue) {
-      if (+data <= maxValue && +data >= minValue && +val + +data <= maxValue && +val + +data >= minValue || val === '-') {
-        setNewValue(val);
-      } else if (+val + +data > maxValue) {
-        setValueToMax();
-      } else if (+val + +data < minValue) {
-        setValueToMin();
-      }
-    } else if (isMaxValue && +data <= maxValue || val === '-') {
-      if (+val + +data <= maxValue) {
-        setNewValue(val);
-      } else {
-        setValueToMax();
-      }
-    } else if (isMinValue && +data >= minValue || val === '-') {
-      if (+val + +data >= minValue) {
-        setNewValue(val);
-      } else {
-        setValueToMin();
-      }
-    } else {
-      setNewValue(val);
-    }
-  }, [data, isControlled]);
-  const setNewInputValue = useCallback(value => {
-    !isControlled && setData(value.trim());
-    !isNaN(+value) && onChange(value);
-  }, [isControlled]);
-  const handleInputChange = useCallback(_ref2 => {
-    let {
-      target: {
-        value
-      }
-    } = _ref2;
-    if (isMinValue && isMaxValue) {
-      if (+value <= maxValue && +value >= minValue || value === '-') {
-        setNewInputValue(value);
-      }
-    } else if (isMaxValue) {
-      if (+value <= maxValue) {
-        setNewInputValue(value);
-      } else if (value === '-') {
-        setNewInputValue(value);
-      }
-    } else if (isMinValue) {
-      if (+value >= minValue) {
-        setNewInputValue(value);
-      } else if (value === '-') {
-        setNewInputValue(value);
-      }
-    } else {
-      setNewInputValue(value);
-    }
-  }, [maxValue, minValue]);
-  useKeyDown(e => {
-    stopEvent(e, true);
-    if (e.key === keyDownKeys.arrowUp && !isDisablePlus) {
-      handleChange(counterStep);
-    }
-    if (e.key === keyDownKeys.arrowDown && !isDisableMinus) {
-      handleChange(-counterStep);
-    }
-  }, [handleChange], ref, [keyDownKeys.arrowUp, keyDownKeys.arrowDown]);
-  useEffect(() => {
-    var _inputRef$current, _inputRef$current2;
-    if (((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.scrollWidth) > ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.offsetWidth)) {
-      !isTruncated && setIsTruncated(true);
-    } else {
-      isTruncated && setIsTruncated(false);
-    }
-  }, [data]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: ref,
-    style: {
-      maxWidth: modifiedSize
-    },
-    onMouseOver: () => isTruncated && setShowInputTooltip(true),
-    onMouseLeave: () => isTruncated && setShowInputTooltip(false),
-    className: classnames('counter', className, "s-".concat(size), "r-".concat(cornerRadius))
-  }, label && /*#__PURE__*/React__default.createElement(Label, {
-    size: "medium",
-    labelText: label
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "counter__wrapper"
-  }, !readOnly && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: isDisableMinus && !isLoading ? minusTooltipText : ''
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "counter__button counter__button-minus"
-  }, isLoading ? /*#__PURE__*/React__default.createElement(SkeletonLoader, {
-    isBusy: isLoading
-  }) : /*#__PURE__*/React__default.createElement(Button, {
-    icon: isLoading ? 'bc-icon-loader' : 'bc-icon-minus',
-    disabled: isMinMaxWrong || isDisableMinus || disabled,
-    cornerRadius: cornerRadius,
-    onClick: () => handleChange(-counterStep)
-  }))), /*#__PURE__*/React__default.createElement(Tooltip, {
-    alwaysShow: showInputTooltip,
-    title: isTruncated ? data : ''
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "counter__input-holder"
-  }, isLoading ? /*#__PURE__*/React__default.createElement(SkeletonLoader, {
-    isBusy: isLoading
-  }) : /*#__PURE__*/React__default.createElement(ExtendedInput, {
-    ref: inputRef,
-    className: "counter__input",
-    disabled: isMinMaxWrong || disabled || isLoading,
-    cornerRadius: inputRadiusMap[cornerRadius],
-    onChange: handleInputChange,
-    showNumberIcon: false,
-    readOnly: readOnly || inputReadOnly,
-    type: "number",
-    value: data
-  }))), !readOnly && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: isDisablePlus && !isLoading ? plusTooltipText : ''
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "counter__button counter__button-plus"
-  }, isLoading ? /*#__PURE__*/React__default.createElement(SkeletonLoader, {
-    isBusy: isLoading
-  }) : /*#__PURE__*/React__default.createElement(Button, {
-    icon: isLoading ? 'bc-icon-loader' : 'bc-icon-plus',
-    disabled: isMinMaxWrong || isDisablePlus || disabled,
-    cornerRadius: cornerRadius,
-    onClick: () => handleChange(counterStep)
-  })))));
-}
-const CounterConfig = {
-  size: ['small', 'medium', 'big'],
-  cornerRadius: ['round', 'smooth']
-};
-Counter.propTypes = {
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * counter will become disabled when set to "true"
-   */
-  disabled: PropTypes.bool,
-  /**
-   * counter input will become readonly when set to "true"
-   */
-  inputReadOnly: PropTypes.bool,
-  /**
-   * Label for 'counter'.
-   */
-  label: PropTypes.string,
-  /**
-   * onChange function which returns callBack if there is a change
-   */
-  onChange: PropTypes.func,
-  /**
-   * Use this prop to control counter state. Note that when you specify this prop, the counter will not functionate itself
-   */
-  value: PropTypes.number,
-  /**
-   * This prop will only applied once as defaultState for "value" when counter mounts.
-   * Note that specifying this prop is not mean controlling it.
-   */
-  defaultValue: PropTypes.number,
-  /**
-   * Is loading state.
-   */
-  isLoading: PropTypes.bool,
-  /**
-   * counter size, if the set value is number default use px
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * counter size
-   */
-  size: PropTypes.oneOf(CounterConfig.size),
-  /**
-   * counter corner radius
-   */
-  cornerRadius: PropTypes.oneOf(CounterConfig.cornerRadius),
-  /**
-   * minus tooltip text
-   */
-  minusTooltipText: PropTypes.string,
-  /**
-   * plus tooltip text
-   */
-  plusTooltipText: PropTypes.string,
-  /**
-   * Counter minimum value
-   */
-  minValue: PropTypes.number,
-  /**
-   * Counter maximum value
-   */
-  maxValue: PropTypes.number,
-  /**
-   * Counter step value
-   */
-  step: PropTypes.number
-};
-Counter.defaultProps = {
-  cornerRadius: CounterConfig.cornerRadius[0],
-  size: CounterConfig.size[1],
-  minusTooltipText: '',
-  inputReadOnly: false,
-  plusTooltipText: '',
-  isLoading: false,
-  disabled: false,
-  readOnly: false,
-  onChange: noop,
-  width: '100px',
-  label: '',
-  step: 1
-};
-
-export { Counter as default };

package/DateFilter/index.js

@@ -1,183 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { n as noop, b as isToday, d as isYesterday, e as isThisWeek, g as isLastWeek, h as isThisMonth, j as isLastMonth, l as isLastMonthToDate, m as getLMTD } from '../index-5f37f281.js';
-import { d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
-import Button from '../Button/index.js';
-import DatePickerInput from '../DatePickerInput/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
-import 'react-dom';
-import '../_commonjsHelpers-24198af3.js';
-import '../tslib.es6-f211516f.js';
-import '../Icon/index.js';
-import '../configs-00612ce0.js';
-import '../hooks/useClick.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../index-3188e46e.js';
-import '../index-122432cd.js';
-import '../hooks/useClickOutside.js';
-import '../Scrollbar/index.js';
-import '../GeneUIProvider/index.js';
-import '../debounce-4419bc2f.js';
-import '../ExtendedInput/index.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../SuggestionList/index.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-c7646e48.js';
-import '../DatePicker/index.js';
-import '../guid-8ddf77b3.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .date-filters-holder{align-items:center;display:flex;justify-content:flex-end;width:100%}[data-gene-ui-version=\"2.16.4\"] .date-filters-holder>:not(:last-child){flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .date-filter-input{margin-inline-start:1rem}html:not([dir=rtl]) .date-filter-input .input-structure{padding-right:0}html[dir=rtl] .date-filter-input .input-structure{padding-left:0}[data-gene-ui-version=\"2.16.4\"] .date-filter-input .icon{border-radius:var(--input-element-border-radius,100%);height:3.6rem;margin:0 0 0 .5rem;width:3.6rem}html[dir=rtl] .date-filter-input .icon{margin:0 .5rem 0 0}[data-gene-ui-version=\"2.16.4\"] .date-filter-input.active .icon{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.4\"] .date-filter-input.active .input-element-back{background:#0000;border-color:var(--hero)}";
-styleInject(css_248z);
-
-function getFilterByKey(key, date) {
-  const [start, end] = date;
-  const startDate = start ? dayjsWithPlugins(start) : null;
-  const endDate = end ? dayjsWithPlugins(end) : null;
-  const today = dayjsWithPlugins();
-  const dayFromLastWeek = today.subtract(7, 'day');
-  const dayFromLastMonth = today.subtract(1, 'month');
-  if (key === 'today') return {
-    selected: startDate && isToday(startDate, endDate || startDate),
-    value: [today, today]
-  };
-  if (key === 'yesterday') return {
-    selected: startDate && isYesterday(startDate, endDate || startDate),
-    value: [today.subtract(1, 'day'), today.subtract(1, 'day')]
-  };
-  if (key === 'thisWeek') return {
-    selected: startDate && isThisWeek(startDate, endDate),
-    value: [today.startOf('week'), today.endOf('week')]
-  };
-  if (key === 'lastWeek') return {
-    selected: startDate && isLastWeek(startDate, endDate),
-    value: [dayFromLastWeek.startOf('week'), dayFromLastWeek.endOf('week')]
-  };
-  if (key === 'thisMonth') return {
-    selected: startDate && isThisMonth(startDate, endDate),
-    value: [today.startOf('month'), today.endOf('month')]
-  };
-  if (key === 'lastMonth') return {
-    selected: startDate && isLastMonth(startDate, endDate),
-    value: [dayFromLastMonth.startOf('month'), dayFromLastMonth.endOf('month')]
-  };
-  if (key === 'LMTD') return {
-    selected: startDate && isLastMonthToDate(startDate, endDate),
-    value: [dayFromLastMonth.startOf('month'), getLMTD(today, dayFromLastMonth)]
-  };
-}
-const getRightDate = (date, isControlled) => isControlled && date ? dayjsWithPlugins(date).toDate() : null;
-function DateFilter(props) {
-  const {
-    value,
-    onChange,
-    format,
-    filters,
-    className,
-    buttonProps,
-    pickerProps,
-    ...restProps
-  } = props;
-  const isControlled = ('value' in props);
-  const [localValue, setLocalValue] = useState(() => {
-    const [start, end] = value;
-    const startDate = getRightDate(start, isControlled);
-    const endDate = getRightDate(end, isControlled);
-    return [startDate, endDate];
-  });
-  const handleChange = useCallback(dates => {
-    setLocalValue(dates);
-    onChange(dates);
-  }, [onChange]);
-  const handleButtonClick = useCallback(_ref => {
-    let [start, end] = _ref;
-    const dateObj = [start.toDate(), end.toDate()];
-    setLocalValue(dateObj);
-    onChange(dateObj);
-  }, [onChange]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames('date-filters-holder', className)
-  }, restProps), Object.keys(filters).map(key => {
-    const label = filters[key];
-    const filter = getFilterByKey(key, localValue);
-    return filter ? /*#__PURE__*/React__default.createElement(Button, _extends({
-      key: key,
-      onClick: () => handleButtonClick(filter.value),
-      color: "default",
-      active: filter.selected,
-      appearance: "minimal"
-    }, buttonProps), label) : null;
-  }), /*#__PURE__*/React__default.createElement(DatePickerInput.WithRange, _extends({
-    value: localValue,
-    format: format,
-    onChange: handleChange,
-    appearance: "minimal",
-    flexibility: "content-size",
-    className: "date-filter-input active"
-  }, pickerProps)));
-}
-DateFilter.propTypes = {
-  /**
-   * Specify the format of date
-   */
-  format: PropTypes.string,
-  /**
-   * Fires when user attempts to change value
-   * (dates: Array) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Controls which filter buttons will be displayed based on filters object existing keys.
-   * For example if you define only `today` property on filters objects
-   * It will be display button with [today]'s property value
-   * Which will change Datefilter value to today.
-   * All filters will be displayed by default.
-   */
-  filters: PropTypes.exact({
-    today: PropTypes.string,
-    yesterday: PropTypes.string,
-    thisWeek: PropTypes.string,
-    lastWeek: PropTypes.string,
-    thisMonth: PropTypes.string,
-    lastMonth: PropTypes.string,
-    LMTD: PropTypes.string
-  }),
-  /**
-   * Current value. Creates a controlled component.
-   */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(dayjsWithPlugins)), PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
-  /**
-   * Additional classname which applies to datefilter holder div element
-   */
-  className: PropTypes.string,
-  /**
-   * Accepts same props as button component (atoms)
-   */
-  buttonProps: PropTypes.object,
-  /**
-   * This props will pass to picker, check DatePicker prop types
-   */
-  pickerProps: PropTypes.object
-};
-DateFilter.defaultProps = {
-  value: [],
-  format: getBrowserDateFormat(),
-  onChange: noop,
-  filters: {
-    today: 'Today',
-    yesterday: 'Yesterday',
-    thisWeek: 'This Week',
-    lastWeek: 'Last Week',
-    thisMonth: 'This Month',
-    lastMonth: 'Last Month',
-    LMTD: 'LMTD'
-  }
-};
-
-export { DateFilter as default };