@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/Button-3GkRq8Pv.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+var Icon = require('./Icon-UBahY607.js');
+var Link = require('./Link-BoShjCEw.js');
+var index = require('./components/Loader.js');
+var Text = require('./Text-D7Aq1i5R.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var buttonConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        buttonConfig.appearance = newComponent;
+    },
+};
+var Button = React__default.default.forwardRef(function Button(props, ref) {
+    var before = props.before, appearance = props.appearance, after = props.after, className = props.className, dataTour = props.dataTour, dataTestId = props.dataTestId, Badge = props.Badge, children = props.children, fillIcon = props.fillIcon, fillIconAfter = props.fillIconAfter, fillIconBefore = props.fillIconBefore, iconAfter = props.iconAfter, iconAfterSize = props.iconAfterSize, iconBefore = props.iconBefore, iconBeforeSize = props.iconBeforeSize, label = props.label, labelTextColor = props.labelTextColor, labelTextColorHover = props.labelTextColorHover, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, labelTextWrap = props.labelTextWrap, _a = props.loaderSet, loaderSet = _a === void 0 ? 'simple' : _a, loaderFill = props.loaderFill, loaderItemFill = props.loaderItemFill, link = props.link, href = props.href, target = props.target, rel = props.rel, _b = props.size, size = _b === void 0 ? 'xl' : _b, icon = props.icon, iconShape = props.iconShape, iconAfterShape = props.iconAfterShape, iconBeforeShape = props.iconBeforeShape, iconSize = props.iconSize, iconFill = props.iconFill, iconFillSize = props.iconFillSize, iconStroke = props.iconStroke, iconBeforeFill = props.iconBeforeFill, iconBeforeFillSize = props.iconBeforeFillSize, iconBeforeStroke = props.iconBeforeStroke, iconAfterFill = props.iconAfterFill, iconAfterFillSize = props.iconAfterFillSize, iconAfterStroke = props.iconAfterStroke, iconAfterSrc = props.iconAfterSrc, iconBeforeSrc = props.iconBeforeSrc, iconSrc = props.iconSrc, type = props.type, _c = props.loading, loading = _c === void 0 ? false : _c, _d = props.htmlType, htmlType = _d === void 0 ? 'button' : _d; props.width; var isDisabled = props.isDisabled, onClick = props.onClick, onMouseDown = props.onMouseDown;
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'button_width_',
+        propsKey: 'width',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'button_size_',
+        propsKey: 'size',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'button_shape_',
+        propsKey: 'shape',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @ts-expect-error
+    var _f = useStyles.useStyles(props), buttonStyles = _f.styles, labelStyles = _f.label;
+    var appearanceConfig = appearance && buttonConfig.appearance && buttonConfig.appearance[appearance];
+    return (jsxRuntime.jsxRuntimeExports.jsx(Link.LinkWrapper, { className: clsx__default.default(className, 'button', type && "button_type_".concat(type), borderWidthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderType) &&
+                "border-type_".concat(appearanceConfig.borderType).replace(/([A-Z])/g, '-$1').toLowerCase()), fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label &&
+            (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) &&
+            'button_type_icon', label &&
+            (after ||
+                before ||
+                icon ||
+                iconAfter ||
+                iconAfterSrc ||
+                iconBefore ||
+                iconBeforeSrc ||
+                iconSrc) &&
+            "button_type_with-icon button_type_with-icon_".concat(size)), "data-test-id": dataTestId && "".concat(dataTestId, "Button"), "data-tour": dataTour, DefaultComponent: "button", disabled: isDisabled, href: link || href, rel: rel, style: buttonStyles, target: target, type: htmlType, onClick: onClick, onMouseDown: onMouseDown, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "button__wrapper", ref: ref, children: [loading && (jsxRuntime.jsxRuntimeExports.jsx(index.Loader, { className: "button__loader", 
+                    // @ts-expect-error
+                    fill: loaderFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderFill), itemFill: loaderItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.loaderItemFill), set: loaderSet })), before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_before", fill: fillIconBefore, fillSize: iconBeforeFillSize, iconFill: iconBeforeFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeFill), iconStroke: iconBeforeStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconBeforeStroke), imageSrc: iconBeforeSrc, shape: iconBeforeShape, size: iconBeforeSize, SvgImage: iconBefore })), (icon || iconSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon", fill: fillIcon, fillSize: iconFillSize, iconFill: iconFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconFill), iconStroke: iconStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconStroke), imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), (children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label)) && (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "button__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize) || undefined, 
+                    // @ts-expect-error
+                    style: labelStyles, textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textColorHover: labelTextColorHover || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColorHover), textWrap: labelTextWrap, textWeight: labelTextWeight, children: children || label || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.label) })), (iconAfter || iconAfterSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "button__icon_after", fill: fillIconAfter, fillSize: iconAfterFillSize, iconFill: iconAfterFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterFill), iconStroke: iconAfterStroke || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.iconAfterStroke), imageSrc: iconAfterSrc, shape: iconAfterShape, size: iconAfterSize, SvgImage: iconAfter })), Badge, after] }) }));
+});
+Button.defaultProps = {
+    // Button with a `type="submit"` attribute is a form control by default.
+    // If the button is not associated with any form, it will look for
+    // the nearest form in the DOM and submit its data when clicked.
+    htmlType: 'button',
+    size: 'xl',
+    width: 'hug',
+    loaderSet: 'simple',
+    loading: false,
+};
+
+exports.Button = Button;
+exports.buttonConfig = buttonConfig;

package/dist/cjs/ContextMenuItem-DmbSoGn1.js

@@ -0,0 +1,213 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var shape = require('./constants/componentProps/shape.js');
+var Text = require('./Text-D7Aq1i5R.js');
+var Icon = require('./Icon-UBahY607.js');
+var Divider = require('./Divider-CIYsHYud.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function ContextMenu(props) {
+  const {
+    id,
+    children,
+    className,
+    set,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'context-menu_shape_',
+    propsKey: 'shape'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'context-menu', set && `context-menu_set_${set}`, shapeClass, fillClass),
+    id: id,
+    onClick: onClick
+  }, children);
+}
+ContextMenu.propTypes = {
+  className: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  onClick: PropTypes__default.default.func
+};
+ContextMenu.defaultProps = {
+  tag: 'div'
+};
+ContextMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ContextMenu",
+  "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "set": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "shape": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeDesktop": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeMobile": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "shapeTablet": {
+      "description": "",
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "shapeProps"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+function ContextMenuItem(props) {
+  const {
+    id,
+    children,
+    className,
+    label,
+    dividerWidth,
+    dividerDirection,
+    dividerSize,
+    dividerFill,
+    iconBefore,
+    iconBeforeSize,
+    iconBeforeBgFill,
+    iconBeforeFill,
+    iconBeforeStroke,
+    iconAfter,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    isActive,
+    onClick
+  } = props;
+  const labelTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextSize'
+  });
+  const labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextColor'
+  });
+  const labelTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'labelTextWeight'
+  });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'context-menu__item', fillClass, fillHoverClass, onClick && 'cursor_type_pointer'),
+    id: id,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "context-menu__item-wrapper"
+  }, iconBefore && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    className: "context-menu__item-icon-before",
+    SvgImage: iconBefore,
+    size: iconBeforeSize,
+    bgFill: iconBeforeBgFill,
+    fill: iconBeforeFill,
+    stroke: iconBeforeStroke
+  }), label && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "context-menu__item-title",
+    textColor: labelTextColorClass,
+    size: labelTextSizeClass,
+    textWeight: labelTextWeightClass
+  }, label), iconAfter && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    className: "context-menu__item-icon-after",
+    SvgImage: iconAfter,
+    size: iconAfterSize,
+    bgFill: iconAfterBgFill,
+    fill: iconAfterFill,
+    stroke: iconAfterStroke
+  })), /*#__PURE__*/React__default.default.createElement(Divider.Divider, {
+    className: "context-menu__item-divider",
+    width: dividerWidth,
+    direction: dividerDirection,
+    size: dividerSize,
+    fill: dividerFill
+  }));
+}
+ContextMenuItem.propTypes = {};
+ContextMenuItem.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ContextMenuItem"
+};
+
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuItem = ContextMenuItem;

package/dist/cjs/Divider-CIYsHYud.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Divider(props) {
+    var className = props.className;
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'divider_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_',
+        propsKey: 'fillActive',
+    });
+    var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_active_hover_',
+        propsKey: 'fillActiveHover',
+    });
+    var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_disabled_',
+        propsKey: 'fillDisabled',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'divider_size_',
+        propsKey: 'size',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var hrStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("hr", { className: clsx__default.default(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass), style: hrStyles }));
+}
+
+exports.Divider = Divider;

package/dist/cjs/Dot-vDSigHDs.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('./jsx-runtime-BCmQOGxJ.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
+var useStyles = require('./hooks/useStyles.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Dot(props) {
+    var className = props.className, children = props.children;
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dot_shape_',
+        propsKey: 'shape',
+    });
+    var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'dot_size_',
+        propsKey: 'size',
+    });
+    // @ts-expect-error
+    var styles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'dot', borderColorClass, borderTypeClass, fillClass, shapeClass, sizeClass), style: styles, children: children }));
+}
+Dot.defaultProps = {};
+
+exports.Dot = Dot;