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

package/Status/index.js

@@ -1,97 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import Icon from '../Icon/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../tslib.es6-f211516f.js';
-import 'react-dom';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .static-title-holder{align-items:flex-start;display:inline-flex;flex-direction:column;max-width:100%;vertical-align:top}[data-gene-ui-version=\"2.16.4\"] .static-title-holder .st-t{font:600 1.4rem/1.8rem var(--font-family);margin:0 0 .4rem;opacity:.5;padding:0 var(--static-title-padding,0)}[data-gene-ui-version=\"2.16.4\"] .static-title-holder .st-c{max-width:100%}[data-gene-ui-version=\"2.16.4\"] .static-title-holder .st-c:nth-child(2){align-items:center;display:flex;min-height:3.2rem}[data-gene-ui-version=\"2.16.4\"] .static-title-holder.f-full-width,[data-gene-ui-version=\"2.16.4\"] .static-title-holder.f-full-width .st-c{width:100%}[data-gene-ui-version=\"2.16.4\"] .status-holder{align-items:center;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .status-holder p{height:2.4rem;overflow:hidden}[data-gene-ui-version=\"2.16.4\"] .status-holder span{display:block;overflow:hidden}[data-gene-ui-version=\"2.16.4\"] .status-holder>*+*{margin:0 0 0 .7rem}html[dir=rtl] .status-holder>*+*{margin:0 .7rem 0 0}[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon{align-items:center;color:var(--hero);display:flex;height:3rem;justify-content:center;position:relative;transition:color .3s,opacity .3s;width:3rem}[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon:after,[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon:before{border-radius:100%;content:\"\";display:block;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s,background .3s,border-color .3s;width:100%}[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon:before{background:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon:after{border:1px solid var(--hero)}[data-gene-ui-version=\"2.16.4\"] .status-holder .status-icon .icon{position:relative;z-index:2}[data-gene-ui-version=\"2.16.4\"] .status-holder:hover .hover-text+span,[data-gene-ui-version=\"2.16.4\"] .status-holder:not(:hover) .hover-text{height:0}@media (hover:hover){[data-gene-ui-version=\"2.16.4\"] .status-holder.clickable:hover .status-icon:before{opacity:.05}[data-gene-ui-version=\"2.16.4\"] .status-holder.clickable:hover .status-icon:after{opacity:.66}}";
-styleInject(css_248z);
-
-const statusIconTypes = ['dot', 'play', 'stop', 'circle', 'circle-outline'];
-const statusEnums = {
-  dot: 'bc-icon-dot',
-  play: 'bc-icon-status-play',
-  stop: 'bc-icon-status-stop',
-  circle: 'bc-icon-status-circle',
-  'circle-outline': 'bc-icon-status-circle-outline'
-};
-function Status(_ref) {
-  let {
-    label,
-    color,
-    title,
-    onClick,
-    iconType,
-    hoverTitle,
-    className,
-    tooltipText,
-    ...restProps
-  } = _ref;
-  const Content = /*#__PURE__*/React__default.createElement("ul", _extends({
-    className: "static-title-holder"
-  }, restProps), label && /*#__PURE__*/React__default.createElement("li", {
-    className: "st-t"
-  }, label), /*#__PURE__*/React__default.createElement("li", {
-    className: "st-c"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('status-holder', "c-".concat(color), className, {
-      clickable: !!hoverTitle,
-      'cursor-pointer': !!onClick
-    }),
-    onClick: onClick,
-    style: {
-      '--hero': color
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "status-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: statusEnums[iconType]
-  })), title && /*#__PURE__*/React__default.createElement("p", null, hoverTitle && /*#__PURE__*/React__default.createElement("span", {
-    className: "hover-text"
-  }, hoverTitle), /*#__PURE__*/React__default.createElement("span", null, title)))));
-  return tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    position: "auto",
-    title: tooltipText
-  }, Content) : Content;
-}
-Status.propTypes = {
-  /**
-   * Label for 'Status'.
-   */
-  label: PropTypes.string,
-  /**
-   * Title for 'Status'.
-   */
-  title: PropTypes.string,
-  /**
-   * Fires an event on 'Status' change((event: Event) => void).
-   */
-  onClick: PropTypes.func,
-  /**
-   * External/Additional className that can be added to 'Status' component.
-   */
-  className: PropTypes.string,
-  /**
-   * Title for hovered state 'Status'.
-   */
-  hoverTitle: PropTypes.string,
-  /**
-   * Text for tooltip.
-   */
-  tooltipText: PropTypes.string,
-  /**
-   * External color className
-   */
-  color: PropTypes.string,
-  /**
-   * Various types for icon
-   */
-  iconType: PropTypes.oneOf(statusIconTypes)
-};
-
-export { Status as default, statusIconTypes };

package/Steps/index.js

@@ -1,314 +0,0 @@
-import React__default, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { l as stepsConfig } from '../configs-00612ce0.js';
-import Icon from '../Icon/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import '../dateValidation-67caec66.js';
-import { d as debounce } from '../debounce-4419bc2f.js';
-import 'react-dom';
-import Popover from '../Popover/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import { c as childrenOf } from '../index-5f37f281.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../index-122432cd.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../hooks/useUpdatableRef.js';
-import '../hooks/useForceUpdate.js';
-import '../Portal/index.js';
-import '../Scrollbar/index.js';
-import '../guid-8ddf77b3.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .steps-holder{--circle-font-size:1.2rem;--font-size:1.2rem;--circle-size:2.6rem;--min-height:8.8rem;display:flex;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.4\"] .steps-holder.s-big{--circle-font-size:1.6rem;--font-size:1.4rem;--circle-size:3.6rem;--min-height:9.8rem}[data-gene-ui-version=\"2.16.4\"] .steps-holder.s-big .bc-icon-selected{font-size:var(--circle-size)}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-horizontal{align-items:center;min-height:var(--min-height);text-align:center;width:100%}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-horizontal>li:not(:first-child){margin:0 0 0 1rem}html[dir=rtl] .steps-holder.d-horizontal>li:not(:first-child){margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-horizontal .line{height:1px;width:100%}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-horizontal .line:before{height:inherit;width:0}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-horizontal .line.active:before{width:100%}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical{align-items:flex-start;flex-direction:column;height:100%}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical>li:not(:first-child){margin:.8rem 0 0}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical .line-box{display:flex;justify-content:center;width:var(--circle-size)}[data-gene-ui-version=\"2.16.4\"] .a-dots.steps-holder.d-vertical .line-box{width:1.9rem}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical .line{height:100%;min-height:3.4rem;width:1px}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical .line:before{height:0;width:inherit}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical .line.active:before{height:100%}[data-gene-ui-version=\"2.16.4\"] .steps-holder.d-vertical .step-texts{margin:0 0 0 1.5rem}html[dir=rtl] .steps-holder.d-vertical .step-texts{margin:0 1.5rem 0 0}[data-gene-ui-version=\"2.16.4\"] .steps-holder .line{background:rgba(var(--background-sc-rgb),.04)}[data-gene-ui-version=\"2.16.4\"] .steps-holder .line:before{background:var(--hero);content:\"\";display:block;transition:width .4s,height .4s}[data-gene-ui-version=\"2.16.4\"] .steps-holder.a-dots .line{background:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .steps-holder .s-success{--hero:var(--confirm);--hero-hover:var(--confirm-hover);--hero-sc:var(--confirm-sc);--hero-rgb:var(--confirm-rgb);--hero-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.16.4\"] .steps-holder .s-fail{--hero:var(--danger);--hero-hover:var(--danger-hover);--hero-sc:var(--danger-sc);--hero-rgb:var(--danger-rgb);--hero-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.16.4\"] .step{align-items:center;display:flex;flex-shrink:0;font:600 var(--font-size)/1.8rem var(--font-family);position:relative}[data-gene-ui-version=\"2.16.4\"] .step.clickable{cursor:pointer}[data-gene-ui-version=\"2.16.4\"] .step.clickable .step-circle:before{border:1px solid var(--hero);border-radius:100%;bottom:-.4rem;content:\"\";display:block;left:-.4rem;position:absolute;right:-.4rem;top:-.4rem;transform:scale(0);transition:transform .4s,border-color .4s}[data-gene-ui-version=\"2.16.4\"] .s-initial.step.clickable .step-circle:before,[data-gene-ui-version=\"2.16.4\"] .steps-holder:not(.highlight-current) .s-current.step.clickable .step-circle:before{border-color:rgba(var(--background-sc-rgb),.06)}@media (hover:hover){[data-gene-ui-version=\"2.16.4\"] .step.clickable:hover .step-circle:before{transform:scale(1)}}[data-gene-ui-version=\"2.16.4\"] .step.clickable.s-activated .step-circle:before{transform:scale(1)}[data-gene-ui-version=\"2.16.4\"] .line-box{flex:auto}[data-gene-ui-version=\"2.16.4\"] .d-horizontal .step-label,[data-gene-ui-version=\"2.16.4\"] .d-horizontal .step-title{bottom:100%;left:50%;position:absolute;transform:translateX(-50%);white-space:nowrap;width:auto}[data-gene-ui-version=\"2.16.4\"] .d-horizontal .step-title{margin:0 0 1rem}[data-gene-ui-version=\"2.16.4\"] .d-horizontal .step-title:nth-last-child(2){bottom:auto;margin:1rem 0 0;top:100%}[data-gene-ui-version=\"2.16.4\"] .step-label{opacity:.5}[data-gene-ui-version=\"2.16.4\"] .d-horizontal .step-label{margin:0 0 1.6rem}[data-gene-ui-version=\"2.16.4\"] .step-texts{align-items:flex-start;display:flex;flex-direction:column;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .step-texts.both{font-size:1.4rem}[data-gene-ui-version=\"2.16.4\"] .step-circle{align-items:center;background:rgba(var(--background-sc-rgb),.04);border-radius:100%;display:flex;font-size:var(--circle-font-size);height:var(--circle-size);justify-content:center;position:relative;transition:color .3s,background .3s;width:var(--circle-size)}[data-gene-ui-version=\"2.16.4\"] .highlight-current .s-current .step-circle,[data-gene-ui-version=\"2.16.4\"] .passed .step-circle,[data-gene-ui-version=\"2.16.4\"] .s-activated .step-circle{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.4\"] .step-layer{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;transition:transform .4s;width:100%}[data-gene-ui-version=\"2.16.4\"] .passed .step-layer.layer-1,[data-gene-ui-version=\"2.16.4\"] .step-layer.layer-2{transform:scale(0)}[data-gene-ui-version=\"2.16.4\"] .passed .step-layer.layer-2{transform:scale(1)}[data-gene-ui-version=\"2.16.4\"] .step-dot{--size:1.9rem;--inner-size:0.9rem;align-items:center;display:flex;height:var(--size);justify-content:center;position:relative;width:var(--size)}[data-gene-ui-version=\"2.16.4\"] .view-normal .step-dot{--size:15px;--inner-size:7px}[data-gene-ui-version=\"2.16.4\"] .view-small .step-dot{--size:11px;--inner-size:5px}[data-gene-ui-version=\"2.16.4\"] .step-dot:after,[data-gene-ui-version=\"2.16.4\"] .step-dot:before{border-radius:100%;box-shadow:inset 0 0 0 .2rem var(--hero);content:\"\";display:block}[data-gene-ui-version=\"2.16.4\"] .step-dot:before{content:\"\";height:var(--inner-size);transition:box-shadow .3s;width:var(--inner-size)}[data-gene-ui-version=\"2.16.4\"] .passed .step-dot:before,[data-gene-ui-version=\"2.16.4\"] .s-activated .step-dot:before,[data-gene-ui-version=\"2.16.4\"] .s-current .step-dot:before{box-shadow:inset 0 0 0 .9rem var(--hero)}[data-gene-ui-version=\"2.16.4\"] .step-dot:after{height:100%;left:0;position:absolute;top:0;transform:scale(0);transition:transform .3s;width:100%}[data-gene-ui-version=\"2.16.4\"] .s-activated .step-dot:after,[data-gene-ui-version=\"2.16.4\"] .s-current .step-dot:after{transform:scale(1)}[data-gene-ui-version=\"2.16.4\"] .detailed-value-popover-container{padding:16px}";
-styleInject(css_248z);
-
-const positionMap = {
-  vertical: 'left',
-  horizontal: 'bottom'
-};
-function DetailedView(_ref) {
-  let {
-    content,
-    children,
-    direction
-  } = _ref;
-  const isHoveredOnContent = useRef(false);
-  const isHoveredOnStep = useRef(false);
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const closePopover = () => {
-    debounce(() => {
-      if (!isHoveredOnContent.current && !isHoveredOnStep.current) {
-        setIsPopoverOpen(false);
-      }
-    }, 250)();
-  };
-  const stepOnMouseEnterHandler = () => {
-    isHoveredOnStep.current = true;
-    setIsPopoverOpen(true);
-  };
-  const stepOnMouseLeaveHandler = () => {
-    isHoveredOnStep.current = false;
-    closePopover();
-  };
-  const contentOnMouseEnterHandler = () => isHoveredOnContent.current = true;
-  const contentOnMouseLeaveHandler = () => {
-    isHoveredOnContent.current = false;
-    closePopover();
-  };
-  return /*#__PURE__*/React__default.createElement(Popover, {
-    swipeable: true,
-    align: "center",
-    position: positionMap[direction],
-    isOpen: isPopoverOpen,
-    onClickOutside: () => setIsPopoverOpen(false),
-    extendTargetWidth: false,
-    onSwipedDown: () => setIsPopoverOpen(false),
-    Content: /*#__PURE__*/React__default.createElement("div", {
-      onMouseEnter: contentOnMouseEnterHandler,
-      onMouseLeave: contentOnMouseLeaveHandler,
-      className: "detailed-value-popover-container"
-    }, content)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    onMouseEnter: stepOnMouseEnterHandler,
-    onMouseLeave: stepOnMouseLeaveHandler
-  }, children));
-}
-
-function WithTooltip(_ref) {
-  let {
-    tooltip,
-    children
-  } = _ref;
-  if (!tooltip) return children;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: tooltip
-  }, children);
-}
-function Step(_ref2) {
-  let {
-    title,
-    label,
-    onClick,
-    icon,
-    status,
-    appearance,
-    failColor,
-    successColor,
-    heroColor,
-    style,
-    extraLines,
-    stepsCount,
-    current,
-    tooltip,
-    direction,
-    detailedView,
-    __index
-  } = _ref2;
-  const stepBody = /*#__PURE__*/React__default.createElement("li", {
-    className: classnames('step', "s-".concat(status), {
-      clickable: !!onClick,
-      passed: status === 'fail' || status === 'success'
-    }),
-    onClick: onClick,
-    style: {
-      '--danger': failColor,
-      '--confirm': successColor,
-      '--hero': heroColor,
-      ...style
-    }
-  }, appearance === stepsConfig.appearance[1] ? /*#__PURE__*/React__default.createElement("div", {
-    className: "step-dot"
-  }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "step-circle"
-  }, icon ? /*#__PURE__*/React__default.createElement(Icon, {
-    type: icon
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "step-layer layer-1"
-  }, __index), /*#__PURE__*/React__default.createElement("div", {
-    className: "step-layer layer-2"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: status === 'fail' ? 'bc-icon-clear' : 'bc-icon-selected'
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('step-texts', {
-      both: !!title && !!label
-    })
-  }, title && /*#__PURE__*/React__default.createElement("div", {
-    className: "step-title"
-  }, title), label && /*#__PURE__*/React__default.createElement("div", {
-    className: "step-label"
-  }, label)));
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (__index !== 1 || extraLines) && /*#__PURE__*/React__default.createElement("li", {
-    className: "line-box"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('line', "s-".concat(status), {
-      active: current >= __index
-    }),
-    style: {
-      '--danger': failColor,
-      '--confirm': successColor,
-      '--hero': heroColor
-    }
-  })), detailedView ? /*#__PURE__*/React__default.createElement(DetailedView, {
-    direction: direction,
-    content: detailedView
-  }, stepBody) : /*#__PURE__*/React__default.createElement(WithTooltip, {
-    tooltip: tooltip
-  }, stepBody), __index === stepsCount && extraLines && /*#__PURE__*/React__default.createElement("li", {
-    className: "line-box"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('line', "s-".concat(status), {
-      active: current === stepsCount
-    }),
-    style: {
-      '--danger': failColor,
-      '--confirm': successColor,
-      '--hero': heroColor
-    }
-  })));
-}
-Step.propTypes = {
-  /**
-   * Title of Step
-   */
-  title: PropTypes.string,
-  /**
-   * Label of Step
-   */
-  label: PropTypes.string,
-  /**
-   * Tooltip of Step
-   */
-  tooltip: PropTypes.string,
-  /**
-   * Fires an event on ExtendedInput change((event: Event) => void).
-   */
-  onClick: PropTypes.func,
-  /**
-   * Icon for current step
-   */
-  icon: PropTypes.string,
-  /**
-   * Current step status
-   */
-  status: PropTypes.oneOf(stepsConfig.status),
-  /**
-   * View/style for step
-   */
-  appearance: PropTypes.oneOf(stepsConfig.appearance),
-  /**
-   * style for step
-   */
-  style: PropTypes.object,
-  /**
-   * Color for failed step
-   */
-  failColor: PropTypes.string,
-  /**
-   * Color for success step
-   */
-  successColor: PropTypes.string,
-  /**
-   * Default color for step
-   */
-  heroColor: PropTypes.string
-};
-Step.defaultProps = {
-  appearance: stepsConfig.appearance[0]
-};
-
-function getStepStatus(current, index, statusProp) {
-  if (current > index) return 'success';
-  if (current < index) return 'initial';
-  return statusProp || 'current';
-}
-function Steps(_ref) {
-  let {
-    direction,
-    size,
-    appearance,
-    highlightCurrent,
-    extraLines,
-    children,
-    current,
-    status,
-    failColor,
-    successColor,
-    heroColor,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("ul", _extends({
-    className: classnames('steps-holder', "s-".concat(size), "d-".concat(direction), "a-".concat(appearance), {
-      'highlight-current': highlightCurrent
-    }, className),
-    style: {
-      '--danger': failColor,
-      '--confirm': successColor,
-      '--hero': heroColor
-    }
-  }, rest), React__default.Children.map(children, (child, i) => {
-    const stepStatus = child.props.status || getStepStatus(current, i, status);
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.cloneElement(child, {
-      __index: i + 1,
-      status: stepStatus,
-      appearance,
-      extraLines,
-      stepsCount: children.length,
-      current,
-      direction
-    }));
-  }));
-}
-Steps.propTypes = {
-  /**
-   * View of 'Steps'.
-   */
-  direction: PropTypes.oneOf(stepsConfig.direction),
-  /**
-   * Size of 'Steps'.
-   */
-  size: PropTypes.oneOf(stepsConfig.size),
-  /**
-   * View type of 'Steps'.
-   */
-  appearance: PropTypes.oneOf(stepsConfig.appearance),
-  /**
-   * Turn on/off highlighted view of current step.
-   */
-  highlightCurrent: PropTypes.bool,
-  /**
-   * Show/hide extra lines in 'Steps'.
-   */
-  extraLines: PropTypes.bool,
-  /**
-   * The child or children of 'Steps' molecule
-   */
-  children: childrenOf([Step]),
-  /**
-   * Initial/current step
-   */
-  current: PropTypes.number,
-  /**
-   * Status of current step
-   */
-  status: PropTypes.oneOf(stepsConfig.status),
-  /**
-   * Additional classname
-   */
-  className: PropTypes.string
-};
-Steps.defaultProps = {
-  direction: stepsConfig.direction[0],
-  size: stepsConfig.size[0],
-  appearance: stepsConfig.appearance[0],
-  highlightCurrent: false,
-  extraLines: false,
-  current: 0
-};
-
-export { Step, Steps };