@itcase/ui 1.1.6 → 1.1.7

package/dist/cjs/components/Drawer.js

@@ -0,0 +1,274 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+
+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 _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var getDirectionStyle = function getDirectionStyle(dir, size) {
+  switch (dir) {
+    case 'left':
+      return {
+        top: 0,
+        left: 0,
+        transform: 'translate3d(-100%, 0, 0)',
+        width: size,
+        height: '100vh'
+      };
+
+    case 'right':
+      return {
+        top: 0,
+        right: 0,
+        transform: 'translate3d(100%, 0, 0)',
+        width: size,
+        height: '100vh'
+      };
+
+    case 'bottom':
+      return {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        transform: 'translate3d(0, 100%, 0)',
+        width: '100%',
+        height: size
+      };
+
+    case 'top':
+      return {
+        left: 0,
+        right: 0,
+        top: 0,
+        transform: 'translate3d(0, -100%, 0)',
+        width: '100%',
+        height: size
+      };
+
+    default:
+      return {};
+  }
+};
+
+var EZDrawer = function EZDrawer(props) {
+  var open = props.open,
+      _props$onClose = props.onClose,
+      onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
+      children = props.children,
+      style = props.style,
+      _props$enableOverlay = props.enableOverlay,
+      enableOverlay = _props$enableOverlay === void 0 ? true : _props$enableOverlay,
+      _props$overlayColor = props.overlayColor,
+      overlayColor = _props$overlayColor === void 0 ? '#000' : _props$overlayColor,
+      _props$overlayOpacity = props.overlayOpacity,
+      overlayOpacity = _props$overlayOpacity === void 0 ? 0.4 : _props$overlayOpacity,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 500 : _props$duration,
+      direction = props.direction,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 250 : _props$size,
+      className = props.className,
+      customIdSuffix = props.customIdSuffix,
+      _props$lockBackground = props.lockBackgroundScroll,
+      lockBackgroundScroll = _props$lockBackground === void 0 ? false : _props$lockBackground,
+      _props$overlayClassNa = props.overlayClassName,
+      overlayClassName = _props$overlayClassNa === void 0 ? '' : _props$overlayClassNa;
+  var bodyRef = React.useRef(null);
+  React.useEffect(function () {
+    var updatePageScroll = function updatePageScroll() {
+      bodyRef.current = window.document.querySelector('body');
+
+      if (bodyRef.current && lockBackgroundScroll) {
+        if (open) {
+          bodyRef.current.style.overflow = 'hidden';
+        } else {
+          bodyRef.current.style.overflow = '';
+        }
+      }
+    };
+
+    updatePageScroll();
+  }, [open]);
+  var idSuffix = React.useMemo(function () {
+    return customIdSuffix || (Math.random() + 1).toString(36).substring(7);
+  }, [customIdSuffix]);
+  var overlayStyles = {
+    backgroundColor: "" + overlayColor,
+    opacity: "" + overlayOpacity,
+    zIndex: zIndex
+  };
+
+  var drawerStyles = _extends({
+    zIndex: zIndex + 1,
+    transitionDuration: duration + "ms"
+  }, getDirectionStyle(direction, size), style);
+
+  return React__default.default.createElement("div", {
+    id: 'EZDrawer' + idSuffix,
+    className: 'EZDrawer'
+  }, React__default.default.createElement("input", {
+    type: 'checkbox',
+    id: 'EZDrawer__checkbox' + idSuffix,
+    className: 'EZDrawer__checkbox',
+    onChange: onClose,
+    checked: open
+  }), React__default.default.createElement("nav", {
+    role: 'navigation',
+    id: 'EZDrawer__container' + idSuffix,
+    style: drawerStyles,
+    className: 'EZDrawer__container ' + className
+  }, children), enableOverlay && React__default.default.createElement("label", {
+    htmlFor: 'EZDrawer__checkbox' + idSuffix,
+    id: 'EZDrawer__overlay' + idSuffix,
+    className: 'EZDrawer__overlay ' + overlayClassName,
+    style: overlayStyles
+  }));
+};
+
+function Drawer(props) {
+  const {
+    isOpenModal,
+    type,
+    closeModal,
+    children,
+    size,
+    before,
+    after,
+    dataTour,
+    direction,
+    className
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(EZDrawer, {
+    className: clsx__default.default('drawer', type && `drawer_type_${type}`, className, dataTour && `data-tour-${dataTour}`),
+    direction: direction || 'right',
+    lockBackgroundScroll: true,
+    open: isOpenModal,
+    overlayClassName: "drawer__overlay",
+    size: size || 600,
+    onClose: closeModal
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__before"
+  }, before), children && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__wrapper"
+  }, children), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "drawer__after"
+  }, after));
+}
+Drawer.propTypes = {
+  isOpenModal: PropTypes__default.default.bool.isRequired,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  closeModal: PropTypes__default.default.func,
+  dataTour: PropTypes__default.default.string,
+  direction: PropTypes__default.default.string,
+  // "right", "left", "top", "bottom"
+  size: PropTypes__default.default.number,
+  // width in px
+  type: PropTypes__default.default.string
+};
+Drawer.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Drawer",
+  "props": {
+    "isOpenModal": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
+    },
+    "after": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "before": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "closeModal": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "dataTour": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "direction": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "type": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Drawer = Drawer;

package/dist/cjs/components/Dropdown.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var DropdownItem = require('../DropdownItem-DT8iQfVh.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('./Divider.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/width.js');
+require('./Link.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../Text-CfBPhwqK.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../constants/componentProps/shape.js');
+
+
+
+exports.Dropdown = DropdownItem.Dropdown;
+exports.DropdownItem = DropdownItem.DropdownItem;

package/dist/cjs/components/Flex/Flex.d.ts

@@ -0,0 +1,8 @@
+import { IFlexProps } from './Flex.interface';
+declare function Flex(props: IFlexProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Flex {
+    var defaultProps: {
+        tag: string;
+    };
+}
+export { Flex };

package/dist/cjs/components/Flex/Flex.interface.d.ts

@@ -0,0 +1,116 @@
+import React, { ElementType } from 'react';
+import { alignDirectionPropsType, borderColorPropsType, borderTypePropsType, directionPropsType, fillHoverPropsType, fillPropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, horizontalResizeModePropsType, positionPropsType, shapePropsType, widthPropsType } from '../../constants-ts';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+export interface IFlexProps extends TypeStyleAttributes {
+    id?: number | string;
+    children: React.ReactNode;
+    className?: string;
+    tag?: ElementType;
+    type?: string;
+    onClick?: () => void;
+    alignContent?: flexJustifyContentPropsType;
+    alignItems?: flexAlignPropsType;
+    justifyContent?: flexJustifyContentPropsType;
+    wrap?: flexWrapPropsType;
+    direction?: alignDirectionPropsType;
+    flow?: string;
+    fill?: fillPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+    position?: positionPropsType;
+    border?: borderColorPropsType;
+    borderType?: borderTypePropsType;
+    alignContentDesktop?: flexJustifyContentPropsType;
+    alignContentMobile?: flexJustifyContentPropsType;
+    alignContentTablet?: flexJustifyContentPropsType;
+    alignItemsDesktop?: flexAlignPropsType;
+    alignItemsMobile?: flexAlignPropsType;
+    alignItemsTablet?: flexAlignPropsType;
+    directionDesktop?: alignDirectionPropsType;
+    directionMobile?: alignDirectionPropsType;
+    directionTablet?: alignDirectionPropsType;
+    fillDesktop?: fillPropsType;
+    fillMobile?: fillPropsType;
+    fillTablet?: fillPropsType;
+    flowDesktop?: string;
+    flowMobile?: string;
+    flowTablet?: string;
+    justifyContentDesktop?: flexJustifyContentPropsType;
+    justifyContentMobile?: flexJustifyContentPropsType;
+    justifyContentTablet?: flexJustifyContentPropsType;
+    justifyItems?: flexAlignPropsType;
+    justifyItemsDesktop?: flexAlignPropsType;
+    justifyItemsMobile?: flexAlignPropsType;
+    justifyItemsTablet?: flexAlignPropsType;
+    shapeDesktop?: shapePropsType;
+    shapeMobile?: shapePropsType;
+    shapeTablet?: shapePropsType;
+    positionMobile?: positionPropsType;
+    positionTablet?: positionPropsType;
+    positionDesktop?: positionPropsType;
+    widthMobile?: widthPropsType;
+    widthTablet?: widthPropsType;
+    widthDesktop?: widthPropsType;
+    wrapDesktop?: flexWrapPropsType;
+    wrapMobile?: flexWrapPropsType;
+    wrapTablet?: flexWrapPropsType;
+}
+export interface IFlexItemProps extends TypeStyleAttributes {
+    children: React.ReactNode;
+    className?: string;
+    tag?: ElementType;
+    htmlFor?: string;
+    alignSelf?: flexAlignPropsType;
+    direction?: directionPropsType;
+    grow?: number;
+    alignItems?: flexAlignPropsType;
+    justifyContent?: flexJustifyContentPropsType;
+    shape?: shapePropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    width?: horizontalResizeModePropsType;
+    wrap?: flexWrapPropsType;
+    position?: positionPropsType;
+    alignItemsDesktop?: flexAlignPropsType;
+    alignItemsMobile?: flexAlignPropsType;
+    alignItemsTablet?: flexAlignPropsType;
+    alignSelfDesktop?: flexAlignPropsType;
+    alignSelfMobile?: flexAlignPropsType;
+    alignSelfTablet?: flexAlignPropsType;
+    columnEnd?: number;
+    columnEndDesktop?: number;
+    columnEndMobile?: number;
+    columnEndTablet?: number;
+    columnSpan?: string;
+    columnSpanDesktop?: string;
+    columnSpanMobile?: string;
+    columnSpanTablet?: string;
+    columnStart?: number;
+    columnStartDesktop?: number;
+    columnStartMobile?: number;
+    columnStartTablet?: number;
+    directionDesktop?: directionPropsType;
+    directionMobile?: directionPropsType;
+    directionTablet?: directionPropsType;
+    growDesktop?: number;
+    growMobile?: number;
+    growTablet?: number;
+    fillDesktop?: fillPropsType;
+    fillMobile?: fillPropsType;
+    fillTablet?: fillPropsType;
+    justifyContentDesktop?: flexJustifyContentPropsType;
+    justifyContentMobile?: flexJustifyContentPropsType;
+    justifyContentTablet?: flexJustifyContentPropsType;
+    shapeDesktop?: shapePropsType;
+    shapeMobile?: shapePropsType;
+    shapeTablet?: shapePropsType;
+    widthMobile?: horizontalResizeModePropsType;
+    widthTablet?: horizontalResizeModePropsType;
+    widthDesktop?: horizontalResizeModePropsType;
+    positionMobile?: positionPropsType;
+    positionTablet?: positionPropsType;
+    positionDesktop?: positionPropsType;
+    wrapDesktop?: flexWrapPropsType;
+    wrapMobile?: flexWrapPropsType;
+    wrapTablet?: flexWrapPropsType;
+}

package/dist/cjs/components/Flex/FlexItem.d.ts

@@ -0,0 +1,8 @@
+import { IFlexItemProps } from './Flex.interface';
+declare function FlexItem(props: IFlexItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace FlexItem {
+    var defaultProps: {
+        tag: string;
+    };
+}
+export { FlexItem };

package/dist/cjs/components/Flex/index.d.ts

@@ -0,0 +1,3 @@
+import { Flex } from './Flex.js';
+import { FlexItem } from './FlexItem.js';
+export { Flex, FlexItem };

package/dist/cjs/components/Flex.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var FlexItem = require('../FlexItem-CYXxJtYX.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('react');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('prop-types');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+
+
+exports.Flex = FlexItem.Flex;
+exports.FlexItem = FlexItem.FlexItem;

package/dist/cjs/components/FormField.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var SelectField = require('../SelectField-DVCsVz6q.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('./Radio.js');
+require('../Text-CfBPhwqK.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('./Switch.js');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/size.js');
+require('./Divider.js');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/width.js');
+require('./Icon.js');
+require('react-inlinesvg');
+require('./Link.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/borderType.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
+require('./Title.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/wrap.js');
+require('../constants/componentProps/textSize.js');
+require('./Select.js');
+require('react-select');
+require('react-dom');
+require('../floating-ui.dom-C34fOuI9.js');
+require('./Badge.js');
+require('../Group-DbzIk8kt.js');
+
+
+
+exports.ChoiceField = SelectField.ChoiceField;
+exports.FormField = SelectField.FormField;
+exports.PasswordField = SelectField.PasswordField;
+exports.SelectField = SelectField.SelectField;
+exports.SwitchField = SelectField.SwitchField;

package/dist/cjs/components/Grid.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var GridRow = require('../GridRow-6wilpUeo.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/gridJustifyItems.js');
+require('../constants/componentProps/gridAlign.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/horizontalResizeMode.js');
+require('../constants/componentProps/verticalResizeMode.js');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../constants/componentProps/gridAlignSelf.js');
+require('../constants/componentProps/gridJustifySelf.js');
+
+
+
+exports.Grid = GridRow.Grid;
+exports.GridItem = GridRow.GridItem;
+exports.GridRow = GridRow.GridRow;

package/dist/cjs/components/Group/Group.d.ts

@@ -0,0 +1,9 @@
+import { IGroupConfig, IGroupProps } from './Group.interface';
+declare const groupConfig: IGroupConfig;
+declare function Group(props: IGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Group {
+    var defaultProps: {
+        tag: string;
+    };
+}
+export { Group, groupConfig };

package/dist/cjs/components/Group/Group.interface.d.ts

@@ -0,0 +1,49 @@
+import React, { CSSProperties, ElementType } from 'react';
+import { alignDirectionPropsType, alignPropsType, borderColorPropsType, borderTypePropsType, directionPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, flexGrowPropsType, heightPropsType, justifyContentPropsType, shapePropsType, stackingPropsType, widthPropsType, wrapPropsType } from '../../constants-ts';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+interface ThemeColor {
+    fill?: string;
+    fillHover?: string;
+    labelTextColor?: string;
+    border?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    direction?: directionPropsType;
+}
+interface IAppearance {
+    [key: string]: ThemeColor;
+}
+export interface IGroupConfig {
+    appearance: IAppearance;
+    setAppearance: (newComponent: IAppearance) => void;
+}
+export interface IGroupProps extends TypeStyleAttributes {
+    appearance?: string;
+    id?: number | string;
+    children?: React.ReactNode;
+    className?: string;
+    horizontalScroll?: boolean;
+    tag?: ElementType;
+    htmlFor?: string;
+    set?: string;
+    style?: CSSProperties;
+    dataTour?: string;
+    onClick?: () => void;
+    alignDirection?: alignDirectionPropsType;
+    align?: alignPropsType;
+    stacking?: stackingPropsType;
+    direction?: directionPropsType;
+    wrap?: wrapPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    shape?: shapePropsType;
+    columns?: number;
+    width?: widthPropsType;
+    height?: heightPropsType;
+    borderColor?: borderColorPropsType;
+    borderType?: borderTypePropsType;
+    flexGrow?: flexGrowPropsType;
+    elevation?: elevationPropsType;
+    justifyContent?: justifyContentPropsType;
+}
+export {};

package/dist/cjs/components/Group/index.d.ts

@@ -0,0 +1 @@
+export { Group, groupConfig } from './Group';

package/dist/cjs/components/Group.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var Group = require('../Group-DbzIk8kt.js');
+require('../jsx-runtime-BCmQOGxJ.js');
+require('react');
+require('clsx');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('prop-types');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('../hooks/useStyles.js');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+
+
+exports.Group = Group.Group;
+exports.groupConfig = Group.groupConfig;