@synerise/ds-menu 1.4.11 → 1.4.13

package/dist/Elements/Item/Text/Text.js

@@ -1,166 +1,131 @@
-var _excluded = ["parent", "disabled", "prefixel", "suffixel", "danger", "children", "description", "copyable", "copyValue", "copyHint", "copyTooltip", "timeToHideTooltip", "tooltipProps", "highlight", "style", "prefixVisibilityTrigger", "suffixVisibilityTrigger", "indentLevel", "ordered", "onClick", "checked", "popoverProps", "renderHoverTooltip", "size"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import classNames from 'classnames';
-import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo, useState } from 'react';
-import { useDropdown, useTheme } from '@synerise/ds-core';
-import Icon, { AngleRightS, CheckS } from '@synerise/ds-icon';
-import { Popover, PopoverContent, PopoverTrigger, getPlacement } from '@synerise/ds-popover';
-import { escapeRegEx } from '@synerise/ds-utils';
-import { VisibilityTrigger } from '../../../Menu.types';
-import { useTemporaryLabel } from '../../../hooks/useTemporaryLabel';
-import { getCopyConfig } from '../../../utils/getCopyConfig';
-import { DynamicLabel } from './DynamicLabel';
-import { FLIP_CONFIG, HOVER_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG, TRANSITION_DURATION } from './Text.const';
-import * as S from './Text.styles';
-var renderAddon = function renderAddon(addon) {
-  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    params[_key - 1] = arguments[_key];
-  }
-  return addon instanceof Function ? addon.apply(void 0, params) : addon;
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import copy from "copy-to-clipboard";
+import { useState, useMemo, useCallback } from "react";
+import { useTheme, useDropdown } from "@synerise/ds-core";
+import Icon, { AngleRightS, CheckS } from "@synerise/ds-icon";
+import { getPlacement, Popover, PopoverContent, PopoverTrigger } from "@synerise/ds-popover";
+import { escapeRegEx } from "@synerise/ds-utils";
+import { VisibilityTrigger } from "../../../Menu.types.js";
+import { useTemporaryLabel } from "../../../hooks/useTemporaryLabel.js";
+import { getCopyConfig } from "../../../utils/getCopyConfig.js";
+import { DynamicLabel } from "./DynamicLabel.js";
+import { TRANSITION_DURATION, HOVER_CONFIG, FLIP_CONFIG, OFFSET_CONFIG, SHIFT_CONFIG } from "./Text.const.js";
+import { Wrapper, Inner, ContentWrapper, PrefixelWrapper, Content, Description, ArrowRight, ContentDivider, SuffixWraper, PropagationStopper } from "./Text.styles.js";
+const renderAddon = (addon, ...params) => {
+  return addon instanceof Function ? addon(...params) : addon;
 };
-function WithHoverTooltip(_ref) {
-  var popoverProps = _ref.popoverProps,
-    renderHoverTooltip = _ref.renderHoverTooltip,
-    children = _ref.children,
-    style = _ref.style;
-  var theme = useTheme();
-  var zIndex = parseInt(theme.variables['zindex-tooltip'], 10);
-  var cancelBubblingEvent = useCallback(function () {
-    return function (ev) {
-      ev.stopPropagation();
-    };
+function WithHoverTooltip({
+  popoverProps,
+  renderHoverTooltip,
+  children,
+  style
+}) {
+  const theme = useTheme();
+  const zIndex = parseInt(theme.variables["zindex-tooltip"], 10);
+  const cancelBubblingEvent = useCallback(() => (ev) => {
+    ev.stopPropagation();
   }, []);
-  var popoverPlacement = getPlacement((popoverProps == null ? void 0 : popoverProps.placement) || 'right');
+  const popoverPlacement = getPlacement(popoverProps?.placement || "right");
   return (
-    /*#__PURE__*/
     // onKeyDown is used to disallow propagating key events to tooltip's container element
-    React.createElement(S.PropagationStopper, {
-      onKeyDown: cancelBubblingEvent,
-      onClick: cancelBubblingEvent
-    }, /*#__PURE__*/React.createElement(Popover, _extends({
-      trigger: "hover",
-      modal: false,
-      componentId: "information-card",
-      testId: "information-card",
-      shiftConfig: SHIFT_CONFIG,
-      offsetConfig: OFFSET_CONFIG,
-      flipConfig: FLIP_CONFIG,
-      hoverConfig: HOVER_CONFIG,
-      autoUpdate: {
-        layoutShift: true
-      },
-      transitionDuration: TRANSITION_DURATION,
-      zIndex: zIndex
-    }, popoverProps, {
-      placement: popoverPlacement
-    }), /*#__PURE__*/React.createElement(PopoverContent, null, renderHoverTooltip && renderHoverTooltip()), /*#__PURE__*/React.createElement(PopoverTrigger, {
-      asChild: true
-    }, /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, children))))
+    /* @__PURE__ */ jsx(PropagationStopper, { onKeyDown: cancelBubblingEvent, onClick: cancelBubblingEvent, children: /* @__PURE__ */ jsxs(Popover, { trigger: "hover", modal: false, componentId: "information-card", testId: "information-card", shiftConfig: SHIFT_CONFIG, offsetConfig: OFFSET_CONFIG, flipConfig: FLIP_CONFIG, hoverConfig: HOVER_CONFIG, autoUpdate: {
+      layoutShift: true
+    }, transitionDuration: TRANSITION_DURATION, zIndex, ...popoverProps, placement: popoverPlacement, children: [
+      /* @__PURE__ */ jsx(PopoverContent, { children: renderHoverTooltip && renderHoverTooltip() }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, children }) })
+    ] }) })
   );
 }
-var Text = function Text(_ref2) {
-  var parent = _ref2.parent,
-    disabled = _ref2.disabled,
-    prefixel = _ref2.prefixel,
-    suffixel = _ref2.suffixel,
-    danger = _ref2.danger,
-    children = _ref2.children,
-    description = _ref2.description,
-    copyable = _ref2.copyable,
-    copyValue = _ref2.copyValue,
-    copyHint = _ref2.copyHint,
-    copyTooltip = _ref2.copyTooltip,
-    timeToHideTooltip = _ref2.timeToHideTooltip,
-    tooltipProps = _ref2.tooltipProps,
-    highlight = _ref2.highlight,
-    style = _ref2.style,
-    prefixVisibilityTrigger = _ref2.prefixVisibilityTrigger,
-    suffixVisibilityTrigger = _ref2.suffixVisibilityTrigger,
-    indentLevel = _ref2.indentLevel,
-    ordered = _ref2.ordered,
-    onClick = _ref2.onClick,
-    checked = _ref2.checked,
-    popoverProps = _ref2.popoverProps,
-    renderHoverTooltip = _ref2.renderHoverTooltip,
-    _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'default' : _ref2$size,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  var theme = useTheme();
-  var dropdownContext = useDropdown();
-  var _useState = useState(false),
-    hovered = _useState[0],
-    setHovered = _useState[1];
-  var _useState2 = useState(false),
-    clicked = _useState2[0],
-    setClicked = _useState2[1];
-  var showSuffixOnHover = suffixVisibilityTrigger === VisibilityTrigger.HOVER;
-  var showPrefixOnHover = prefixVisibilityTrigger === VisibilityTrigger.HOVER;
-  var _getCopyConfig = getCopyConfig({
-      copyable: copyable,
-      copyValue: copyValue,
-      disabled: disabled
-    }),
-    canCopyToClipboard = _getCopyConfig.enabled,
-    valueToCopy = _getCopyConfig.valueToCopy,
-    copiedLabel = _getCopyConfig.copiedLabel,
-    labelTimerReset = _getCopyConfig.labelTimerReset,
-    delayClickEvent = _getCopyConfig.delayClickEvent;
-  var _useTemporaryLabel = useTemporaryLabel(labelTimerReset),
-    temporaryLabel = _useTemporaryLabel.temporaryLabel,
-    setTemporaryLabel = _useTemporaryLabel.setTemporaryLabel;
-  var suffixElement = useMemo(function () {
-    return renderAddon(suffixel, hovered);
-  }, [suffixel, hovered]);
-  var prefixElement = useMemo(function () {
-    return renderAddon(prefixel, hovered);
-  }, [prefixel, hovered]);
-  var childrenWithHighlight = useMemo(function () {
-    if (highlight && typeof children === 'string') {
-      var index = children.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
+const Text = ({
+  parent,
+  disabled,
+  prefixel,
+  suffixel,
+  danger,
+  children,
+  description,
+  copyable,
+  copyValue,
+  copyHint,
+  copyTooltip,
+  timeToHideTooltip,
+  tooltipProps,
+  highlight,
+  style,
+  prefixVisibilityTrigger,
+  suffixVisibilityTrigger,
+  indentLevel,
+  ordered,
+  onClick,
+  checked,
+  popoverProps,
+  renderHoverTooltip,
+  size = "default",
+  ...rest
+}) => {
+  const theme = useTheme();
+  const dropdownContext = useDropdown();
+  const [hovered, setHovered] = useState(false);
+  const [clicked, setClicked] = useState(false);
+  const showSuffixOnHover = suffixVisibilityTrigger === VisibilityTrigger.HOVER;
+  const showPrefixOnHover = prefixVisibilityTrigger === VisibilityTrigger.HOVER;
+  const {
+    enabled: canCopyToClipboard,
+    valueToCopy,
+    copiedLabel,
+    labelTimerReset,
+    delayClickEvent
+  } = getCopyConfig({
+    copyable,
+    copyValue,
+    disabled
+  });
+  const {
+    temporaryLabel,
+    setTemporaryLabel
+  } = useTemporaryLabel(labelTimerReset);
+  const suffixElement = useMemo(() => renderAddon(suffixel, hovered), [suffixel, hovered]);
+  const prefixElement = useMemo(() => renderAddon(prefixel, hovered), [prefixel, hovered]);
+  const childrenWithHighlight = useMemo(() => {
+    if (highlight && typeof children === "string") {
+      const index = children.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
       if (index === -1) {
         return children;
       }
-      var escapedHighlight = escapeRegEx(highlight);
-      var startOfQuery = children.toLowerCase().search(escapedHighlight.toLowerCase());
-      var endOfQuery = startOfQuery + highlight.length;
-      var resultArray = [children.substring(0, startOfQuery), /*#__PURE__*/React.createElement("span", {
-        key: children,
-        className: "search-highlight"
-      }, children.substring(startOfQuery, endOfQuery)), children.substring(endOfQuery, children.length)];
+      const escapedHighlight = escapeRegEx(highlight);
+      const startOfQuery = children.toLowerCase().search(escapedHighlight.toLowerCase());
+      const endOfQuery = startOfQuery + highlight.length;
+      const resultArray = [children.substring(0, startOfQuery), /* @__PURE__ */ jsx("span", { className: "search-highlight", children: children.substring(startOfQuery, endOfQuery) }, children), children.substring(endOfQuery, children.length)];
       return resultArray;
     }
     return children;
   }, [children, highlight]);
-  var shouldRenderSuffix = useMemo(function () {
+  const shouldRenderSuffix = useMemo(() => {
     if (showSuffixOnHover) {
       return (!!suffixElement || !!checked) && hovered;
     }
     return !!suffixElement || !!checked;
   }, [showSuffixOnHover, suffixElement, checked, hovered]);
-  var shouldRenderPrefix = useMemo(function () {
+  const shouldRenderPrefix = useMemo(() => {
     if (showPrefixOnHover) {
       return !!prefixElement && hovered;
     }
     return !!prefixElement;
   }, [showPrefixOnHover, prefixElement, hovered]);
-  var renderPrefixElement = function renderPrefixElement(isHover) {
-    return prefixel instanceof Function ? prefixel(isHover) : prefixel;
-  };
-  var className = useMemo(function () {
-    return classNames('ds-menu-item', rest.className, size);
+  const renderPrefixElement = (isHover) => prefixel instanceof Function ? prefixel(isHover) : prefixel;
+  const className = useMemo(() => {
+    return classNames("ds-menu-item", rest.className, size);
   }, [rest.className, size]);
-  var mergedStyle = _extends({}, style, {
-    paddingLeft: 'revert-layer'
-  });
-  var handleClick = function handleClick(itemData) {
-    var handler = function handler() {
-      onClick == null || onClick(itemData);
-      if ((dropdownContext == null ? void 0 : dropdownContext.hideOnItemClick) === true) {
-        dropdownContext == null || dropdownContext.setIsOpen(false);
+  const mergedStyle = {
+    ...style,
+    paddingLeft: "revert-layer"
+  };
+  const handleClick = (itemData) => {
+    const handler = () => {
+      onClick?.(itemData);
+      if (dropdownContext?.hideOnItemClick === true) {
+        dropdownContext?.setIsOpen(false);
       }
     };
     if (delayClickEvent) {
@@ -169,64 +134,34 @@ var Text = function Text(_ref2) {
     }
     handler();
   };
-  var element = /*#__PURE__*/React.createElement(S.Wrapper, _extends({
-    onMouseOver: function onMouseOver() {
-      setHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      setHovered(false);
-    },
-    onMouseDown: function onMouseDown() {
-      setClicked(!clicked);
-      if (canCopyToClipboard && valueToCopy) {
-        copy(valueToCopy);
-        setTemporaryLabel(true);
-      }
-    },
-    disabled: disabled,
-    tabIndex: disabled ? -1 : 0,
-    description: description,
-    style: renderHoverTooltip ? undefined : mergedStyle,
-    ordered: ordered,
-    size: size,
-    onClick: handleClick
-  }, rest, {
-    "data-name": typeof children === 'string' ? children : undefined,
-    className: className
-  }), /*#__PURE__*/React.createElement(S.Inner, {
-    indentLevel: Number(indentLevel)
-  }, /*#__PURE__*/React.createElement(S.ContentWrapper, {
-    className: "ds-menu-content-wrapper"
-  }, shouldRenderPrefix && /*#__PURE__*/React.createElement(S.PrefixelWrapper, {
-    className: "ds-menu-prefix",
-    visible: shouldRenderPrefix,
-    disabled: disabled
-  }, renderPrefixElement(hovered)), /*#__PURE__*/React.createElement(S.Content, {
-    className: "ds-menu-content",
-    highlight: !!highlight
-  }, /*#__PURE__*/React.createElement(DynamicLabel, {
-    content: childrenWithHighlight,
-    alternativeContent: canCopyToClipboard ? copiedLabel : undefined,
-    showAlternative: temporaryLabel
-  }), !!description && /*#__PURE__*/React.createElement(S.Description, null, description)), parent && /*#__PURE__*/React.createElement(S.ArrowRight, {
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleRightS, null),
-    color: theme.palette['grey-600']
-  })), /*#__PURE__*/React.createElement(S.ContentDivider, null), (!!suffixElement || !!checked) && /*#__PURE__*/React.createElement(S.SuffixWraper, {
-    visible: shouldRenderSuffix,
-    disabled: disabled
-  }, !!checked && /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CheckS, null),
-    color: theme.palette["green-600"]
-  }), suffixElement))));
+  const element = /* @__PURE__ */ jsx(Wrapper, { onMouseOver: () => {
+    setHovered(true);
+  }, onMouseLeave: () => {
+    setHovered(false);
+  }, onMouseDown: () => {
+    setClicked(!clicked);
+    if (canCopyToClipboard && valueToCopy) {
+      copy(valueToCopy);
+      setTemporaryLabel(true);
+    }
+  }, disabled, tabIndex: disabled ? -1 : 0, description, style: renderHoverTooltip ? void 0 : mergedStyle, ordered, size, onClick: handleClick, ...rest, "data-name": typeof children === "string" ? children : void 0, className, children: /* @__PURE__ */ jsx(Inner, { indentLevel: Number(indentLevel), children: /* @__PURE__ */ jsxs(ContentWrapper, { className: "ds-menu-content-wrapper", children: [
+    shouldRenderPrefix && /* @__PURE__ */ jsx(PrefixelWrapper, { className: "ds-menu-prefix", visible: shouldRenderPrefix, disabled, children: renderPrefixElement(hovered) }),
+    /* @__PURE__ */ jsxs(Content, { className: "ds-menu-content", highlight: !!highlight, children: [
+      /* @__PURE__ */ jsx(DynamicLabel, { content: childrenWithHighlight, alternativeContent: canCopyToClipboard ? copiedLabel : void 0, showAlternative: temporaryLabel }),
+      !!description && /* @__PURE__ */ jsx(Description, { children: description })
+    ] }),
+    parent && /* @__PURE__ */ jsx(ArrowRight, { disabled, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}), color: theme.palette["grey-600"] }) }),
+    /* @__PURE__ */ jsx(ContentDivider, {}),
+    (!!suffixElement || !!checked) && /* @__PURE__ */ jsxs(SuffixWraper, { visible: shouldRenderSuffix, disabled, children: [
+      !!checked && /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CheckS, {}), color: theme.palette[`green-600`] }),
+      suffixElement
+    ] })
+  ] }) }) });
   if (renderHoverTooltip) {
-    return /*#__PURE__*/React.createElement(WithHoverTooltip, {
-      popoverProps: popoverProps,
-      renderHoverTooltip: renderHoverTooltip,
-      style: mergedStyle
-    }, element);
+    return /* @__PURE__ */ jsx(WithHoverTooltip, { popoverProps, renderHoverTooltip, style: mergedStyle, children: element });
   }
   return element;
 };
-export default Text;
+export {
+  Text as default
+};

package/dist/Elements/Item/Text/Text.styles.d.ts

@@ -1,5 +1,5 @@
-import MenuItem from 'antd/lib/menu/MenuItem';
-import type React from 'react';
+import { default as MenuItem } from 'antd/lib/menu/MenuItem';
+import { default as React } from 'react';
 type WrapperProps = {
     disabled?: boolean;
     prefixel?: React.ReactNode;
@@ -10,31 +10,31 @@ type WrapperProps = {
     size?: 'default' | 'large';
     active?: boolean;
 };
-export declare const ArrowRight: import("styled-components").StyledComponent<"div", any, {
+export declare const ArrowRight: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
 }, never>;
-export declare const Inner: import("styled-components").StyledComponent<"div", any, {
+export declare const Inner: import('styled-components').StyledComponent<"div", any, {
     indentLevel?: number;
 }, never>;
-export declare const PrefixelWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const PrefixelWrapper: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
     visible?: boolean;
 }, never>;
-export declare const Wrapper: import("styled-components").StyledComponent<typeof MenuItem, any, WrapperProps, never>;
-export declare const Content: import("styled-components").StyledComponent<"div", any, {
+export declare const Wrapper: import('styled-components').StyledComponent<typeof MenuItem, any, WrapperProps, never>;
+export declare const Content: import('styled-components').StyledComponent<"div", any, {
     highlight?: boolean;
 }, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SuffixWraper: import("styled-components").StyledComponent<"div", any, {
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SuffixWraper: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
     visible?: boolean;
 }, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DynamicLabelMain: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DynamicLabelAlternate: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DynamicLabelWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DynamicLabelMain: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DynamicLabelAlternate: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DynamicLabelWrapper: import('styled-components').StyledComponent<"div", any, {
     showAlternative?: boolean;
 }, never>;
-export declare const PropagationStopper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PropagationStopper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export {};