linear-react-components-ui 1.1.26-beta.9 → 1.1.27-rc.0

package/lib/drawer/index.js

@@ -1,10 +1,25 @@
-import r from "./Drawer.js";
-import { default as p } from "./Header.js";
-import { default as w } from "./Content.js";
-import e from "../form/withFormSecurity.js";
-const o = e(r);
-export {
-  w as DrawerContent,
-  p as DrawerHeader,
-  o as default
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DrawerContent", {
+  enumerable: true,
+  get: function () {
+    return _Content.default;
+  }
+});
+Object.defineProperty(exports, "DrawerHeader", {
+  enumerable: true,
+  get: function () {
+    return _Header.default;
+  }
+});
+exports.default = void 0;
+require("../assets/styles/drawers.scss");
+var _Drawer = _interopRequireDefault(require("./Drawer"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Content = _interopRequireDefault(require("./Content"));
+var _withFormSecurity = _interopRequireDefault(require("../form/withFormSecurity"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _withFormSecurity.default)(_Drawer.default);

package/lib/drawer/types.d.ts

@@ -1,13 +1,16 @@
-import { default as React, ReactElement, ReactNode } from 'react';
-import { PermissionAttr } from '../@types/PermissionAttr';
-import { Position } from '../@types/Position';
-import { IconNames } from '../@types/Icon';
-export interface IDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+import React__default, { ReactNode, ReactElement } from 'react';
+import { PermissionAttr } from '../@types/PermissionAttr.js';
+import { Position } from '../@types/Position.js';
+import { IconNames } from '../@types/Icon.js';
+import '../icons/helper.js';
+
+interface IDrawerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     overlay?: boolean;
     children?: ReactNode;
     customClass?: string;
     customClassForContent?: string;
     customClassForDrawer?: string;
+    customClassElementDrawer?: string;
     position?: Exclude<Position, 'center'>;
     handlerClose?: () => void;
     closeOnEsc?: boolean;
@@ -19,7 +22,7 @@ export interface IDrawerProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
     isWaiting?: boolean;
 }
-export interface IDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IDrawerHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
     showCloseButton?: boolean;
     customClass?: string;
     title?: string;
@@ -30,8 +33,10 @@ export interface IDrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement>
     icon?: ReactElement;
     titleIcon?: IconNames;
 }
-export interface IDrawerContext {
+interface IDrawerContext {
     handlerClose?: () => void;
     hideContent?: boolean;
     skeletonize?: boolean;
 }
+
+export { IDrawerContext, IDrawerHeaderProps, IDrawerProps };

package/lib/drawer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/dropdown/Popup.d.ts

@@ -1,3 +1,6 @@
-import { IPopupProps } from './types';
-declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, targetRef, ...props }: IPopupProps) => import('react').ReactPortal;
-export default DropdownPopup;
+import * as React from 'react';
+import { IPopupProps } from './types.js';
+
+declare const DropdownPopup: ({ id, customClassForDropdown, align, isFloatMenu, topPosition, leftPosition, rightPosition, minWidth, targetRef, ...props }: IPopupProps) => React.ReactPortal;
+
+export { DropdownPopup as default };

package/lib/dropdown/Popup.js

@@ -1,51 +1,90 @@
-import { useRef as w, useEffect as x } from "react";
-import P from "react-dom";
-import { v } from "../chunks/v1.Ds1rkxUj.js";
-const y = ({
-  align: s,
-  isFloatMenu: r,
-  minWidth: c,
-  container: i,
-  target: d
-}) => {
-  if (!i || !d) return "";
-  const e = d.getBoundingClientRect(), a = r ? void 0 : window.innerWidth - e.x - e.width - 4, p = e.left;
-  let n = e.top + window.scrollY + e.height + (r ? 6 : 2), t, o = !1;
-  if (n + i.scrollHeight > window.innerHeight) {
-    const m = e.top, u = i.scrollHeight;
-    o = u > m, t = o ? m - 10 : u, n = n - t - e.height - (r ? 6 : 2) - 5;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _uuid = require("uuid");
+const _excluded = ["id", "customClassForDropdown", "align", "isFloatMenu", "topPosition", "leftPosition", "rightPosition", "minWidth", "targetRef"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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; }
+const getDropdownStyles = _ref => {
+  let {
+    align,
+    isFloatMenu,
+    minWidth,
+    container,
+    target
+  } = _ref;
+  if (!container || !target) return '';
+  const targetDimensions = target.getBoundingClientRect();
+  const rightPosition = !isFloatMenu ? window.innerWidth - targetDimensions.x - targetDimensions.width - 4 : undefined;
+  const leftPosition = targetDimensions.left;
+  let topPosition = targetDimensions.top + window.scrollY + targetDimensions.height;
+  let top = topPosition + (isFloatMenu ? 6 : 2);
+  let maxHeight = undefined;
+  let showScroll = false;
+  const isOverflowing = top + container.scrollHeight > window.innerHeight;
+  if (isOverflowing) {
+    const targetPosition = targetDimensions.top;
+    const containerHeight = container.scrollHeight;
+    showScroll = containerHeight > targetPosition;
+    maxHeight = showScroll ? targetPosition - 10 : containerHeight;
+    top = top - maxHeight - targetDimensions.height - (isFloatMenu ? 6 : 2) - 5;
   }
-  let l = `top: ${n}px; min-width: ${c}px;`;
-  return o && (l += `max-height: ${t}px; overflow-y: scroll;`), s === "left" ? l += `left: ${p}px;` : s === "right" && (l += `right: ${a}px;`), l;
-}, {
-  body: g
-} = document, D = ({
-  id: s,
-  customClassForDropdown: r = "",
-  align: c = "left",
-  isFloatMenu: i = !1,
-  topPosition: d = 0,
-  leftPosition: e = 0,
-  rightPosition: a = 0,
-  minWidth: p = 0,
-  targetRef: f,
-  ...n
-}) => {
-  const t = w(document.createElement("div"));
-  if (t.current.className = `dropdown-component ${r}`, t.current.dataset.testid = "dropdown-component", t && t.current) {
-    const o = document.body.getElementsByClassName("modalcontainer"), h = o[o.length - 1];
-    t.current.style.zIndex = `${o.length ? Number(h.style.zIndex) + 1 : 99999}`;
+  let style = "top: ".concat(top, "px; min-width: ").concat(minWidth, "px;");
+  if (showScroll) style += "max-height: ".concat(maxHeight, "px; overflow-y: scroll;");
+  if (align === 'left') {
+    style += "left: ".concat(leftPosition, "px;");
+  } else if (align === 'right') {
+    style += "right: ".concat(rightPosition, "px;");
   }
-  return x(() => (g.appendChild(t.current), t.current.id = s || `dropdown-component-${v()}`, t.current.style.cssText = y({
-    align: c,
-    isFloatMenu: i,
-    minWidth: p,
-    container: t.current,
-    target: f
-  }), () => {
-    g.removeChild(t.current);
-  }), []), P.createPortal(n.children, t.current);
+  return style;
 };
-export {
-  D as default
+const {
+  body
+} = document;
+const DropdownPopup = _ref2 => {
+  let {
+      id,
+      customClassForDropdown = '',
+      align = 'left',
+      isFloatMenu = false,
+      topPosition = 0,
+      leftPosition = 0,
+      rightPosition = 0,
+      minWidth = 0,
+      targetRef
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  const popup = (0, _react.useRef)(document.createElement('div'));
+  popup.current.className = "dropdown-component ".concat(customClassForDropdown);
+  popup.current.dataset.testid = 'dropdown-component';
+  if (popup && popup.current) {
+    const modalContainers = document.body.getElementsByClassName('modalcontainer');
+    const lastModalContainer = modalContainers[modalContainers.length - 1];
+    popup.current.style.zIndex = "".concat(modalContainers.length ? Number(lastModalContainer.style.zIndex) + 1 : 99999);
+  }
+  (0, _react.useEffect)(() => {
+    body.appendChild(popup.current);
+    popup.current.id = id || "dropdown-component-".concat((0, _uuid.v1)());
+    popup.current.style.cssText = getDropdownStyles({
+      topPosition,
+      leftPosition,
+      rightPosition,
+      align,
+      isFloatMenu,
+      minWidth,
+      container: popup.current,
+      target: targetRef
+    });
+    return () => {
+      body.removeChild(popup.current);
+    };
+  }, []);
+  return /*#__PURE__*/_reactDom.default.createPortal(props.children, popup.current);
 };
+var _default = exports.default = DropdownPopup;

package/lib/dropdown/helper.d.ts

@@ -1,2 +1,4 @@
-export declare const contentClass: (showClearButton: boolean) => string;
-export declare const getDropdownItemCssClass: (selected: boolean, disabled: boolean, striped: boolean) => string;
+declare const contentClass: (showClearButton: boolean) => string;
+declare const getDropdownItemCssClass: (selected: boolean, disabled: boolean, striped: boolean) => string;
+
+export { contentClass, getDropdownItemCssClass };

package/lib/dropdown/helper.js

@@ -1,8 +1,16 @@
-const o = (t) => `content ${t ? "" : "noclear"}`, c = (t, s, n) => {
-  let e = "item";
-  return e += t && !s ? " -selected " : "", e += s ? " -disabled" : "", e += !t && !s && n ? " -striped " : "", e;
-};
-export {
-  o as contentClass,
-  c as getDropdownItemCssClass
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDropdownItemCssClass = exports.contentClass = void 0;
+const contentClass = showClearButton => "content ".concat(showClearButton ? '' : 'noclear');
+exports.contentClass = contentClass;
+const getDropdownItemCssClass = (selected, disabled, striped) => {
+  let className = 'item';
+  className += selected && !disabled ? ' -selected ' : '';
+  className += disabled ? ' -disabled' : '';
+  className += !selected && !disabled && striped ? ' -striped ' : '';
+  return className;
 };
+exports.getDropdownItemCssClass = getDropdownItemCssClass;

package/lib/dropdown/types.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode, Ref } from 'react';
-export interface WithDropdownProps {
+import { ReactNode, Ref, ReactElement } from 'react';
+
+interface WithDropdownProps {
     dropdown?: boolean;
     dropdownOpened?: boolean;
     dropdownAlign?: 'left' | 'right';
@@ -11,17 +12,17 @@ export interface WithDropdownProps {
     isFloatMenu?: boolean;
     handlerClose?: (cb: () => void) => void;
 }
-export interface WrappedComponentProps extends WithDropdownProps {
+interface WrappedComponentProps extends WithDropdownProps {
     getDropdownPopup?: (ref: Ref<HTMLElement | null>) => ReactElement;
 }
-export interface GetDisplayNameParams {
+interface GetDisplayNameParams {
     displayName?: string;
     name?: string;
 }
-export interface WithDropdownContextProps {
+interface WithDropdownContextProps {
     handleDropdownClose: () => void;
 }
-export interface IPopupProps {
+interface IPopupProps {
     id?: string;
     children?: ReactNode;
     customClassForDropdown?: string;
@@ -33,7 +34,7 @@ export interface IPopupProps {
     minWidth?: number;
     targetRef?: HTMLElement | HTMLInputElement | null;
 }
-export interface GetDropdownStyleParams {
+interface GetDropdownStyleParams {
     align: 'left' | 'right';
     minWidth: number;
     isFloatMenu: boolean;
@@ -43,3 +44,5 @@ export interface GetDropdownStyleParams {
     container?: HTMLDivElement;
     target?: HTMLElement | HTMLInputElement | null;
 }
+
+export { GetDisplayNameParams, GetDropdownStyleParams, IPopupProps, WithDropdownContextProps, WithDropdownProps, WrappedComponentProps };

package/lib/dropdown/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/dropdown/withDropdown.d.ts

@@ -1,9 +1,10 @@
-import { default as React } from 'react';
-import { WithDropdownProps, WithDropdownContextProps } from './types';
-declare const WithDropdownContext: React.Context<WithDropdownContextProps>;
-declare const withDropdown: <ComponentProps extends WithDropdownProps>(WrappedComponent: React.ComponentType<ComponentProps>) => {
-    (props: ComponentProps): import("react/jsx-runtime").JSX.Element;
+import React__default from 'react';
+import { WithDropdownContextProps, WithDropdownProps } from './types.js';
+
+declare const WithDropdownContext: React__default.Context<WithDropdownContextProps>;
+declare const withDropdown: <ComponentProps extends WithDropdownProps>(WrappedComponent: React__default.ComponentType<ComponentProps>) => {
+    (props: ComponentProps): JSX.Element;
     displayName: string;
 };
-export default withDropdown;
-export { WithDropdownContext };
+
+export { WithDropdownContext, withDropdown as default };

package/lib/dropdown/withDropdown.js

@@ -1,80 +1,92 @@
-import { j as f } from "../chunks/jsx-runtime.D1SHvdVE.js";
-import { c as K } from "../chunks/compiler-runtime.Cu50tn6L.js";
-import { createContext as Q, useState as V, useRef as q, useEffect as z } from "react";
-import T from "./Popup.js";
-import '../assets/withDropdown.css';const U = Q({}), X = (o) => o.displayName || o.name || "Component", oe = (o) => {
-  const A = (n) => {
-    const e = K.c(30), {
-      dropdownOpened: c,
-      showDropdown: m,
-      dropdown: i,
-      closeDropdownOnClickOutside: F,
-      handlerClose: d,
-      customClassForDropdown: P,
-      children: g,
-      dropdownAlign: L,
-      isFloatMenu: p,
-      isDropdownOpened: B
-    } = n, a = F === void 0 ? !0 : F, S = L === void 0 ? "left" : L, [s, u] = V(c), [G, H] = V(c), w = q(null), $ = q(null);
-    c !== G && (u(c), H(c));
-    let h;
-    e[0] === Symbol.for("react.memo_cache_sentinel") ? (h = (t) => {
-      const {
-        target: E
-      } = t;
-      w?.current && E !== w?.current && !t.composedPath().includes(w.current) && $.current !== E && u(!1);
-    }, e[0] = h) : h = e[0];
-    const M = h;
-    let D;
-    e[1] === Symbol.for("react.memo_cache_sentinel") ? (D = () => {
-      u(Y);
-    }, e[1] = D) : D = e[1];
-    const I = D;
-    let x;
-    e[2] !== g || e[3] !== P || e[4] !== S || e[5] !== p || e[6] !== s ? (x = (t) => !t || !s ? null : ($.current = t, /* @__PURE__ */ f.jsx(T, { targetRef: t, align: S, customClassForDropdown: P, isFloatMenu: p, children: /* @__PURE__ */ f.jsx("div", { className: p ? "items" : void 0, ref: (E) => {
-      w.current = E;
-    }, children: g }) })), e[2] = g, e[3] = P, e[4] = S, e[5] = p, e[6] = s, e[7] = x) : x = e[7];
-    const b = x;
-    let O;
-    e[8] !== a || e[9] !== i ? (O = () => (i && a && document.addEventListener("click", M), () => {
-      i && a && document.removeEventListener("click", M);
-    }), e[8] = a, e[9] = i, e[10] = O) : O = e[10];
-    let v;
-    e[11] === Symbol.for("react.memo_cache_sentinel") ? (v = [], e[11] = v) : v = e[11], z(O, v);
-    let C, _;
-    e[12] !== d ? (C = () => {
-      d && d(() => u(!1));
-    }, _ = [d], e[12] = d, e[13] = C, e[14] = _) : (C = e[13], _ = e[14]), z(C, _);
-    let j;
-    e[15] === Symbol.for("react.memo_cache_sentinel") ? (j = {
-      handleDropdownClose: I
-    }, e[15] = j) : j = e[15];
-    const J = j;
-    let r;
-    e[16] !== b ? (r = (t) => b(t), e[16] = b, e[17] = r) : r = e[17];
-    let l;
-    e[18] !== s || e[19] !== m ? (l = m || (() => u(!s)), e[18] = s, e[19] = m, e[20] = l) : l = e[20];
-    const N = B || s;
-    let y;
-    e[21] !== r || e[22] !== l || e[23] !== N ? (y = {
-      getDropdownPopup: r,
-      showDropdown: l,
-      isDropdownOpened: N
-    }, e[21] = r, e[22] = l, e[23] = N, e[24] = y) : y = e[24];
-    const R = y;
-    if (!i) {
-      let t;
-      return e[25] !== n ? (t = /* @__PURE__ */ f.jsx(o, { ...n }), e[25] = n, e[26] = t) : t = e[26], t;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithDropdownContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Popup = _interopRequireDefault(require("./Popup"));
+require("../assets/styles/dropdown.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, 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); }
+const WithDropdownContext = exports.WithDropdownContext = /*#__PURE__*/(0, _react.createContext)({});
+const getDisplayName = Component => Component.displayName || Component.name || 'Component';
+const withDropdown = WrappedComponent => {
+  const EnhancedComponent = props => {
+    const {
+      dropdownOpened,
+      showDropdown,
+      dropdown,
+      closeDropdownOnClickOutside = true,
+      handlerClose,
+      customClassForDropdown,
+      children,
+      dropdownAlign = 'left',
+      isFloatMenu,
+      isDropdownOpened
+    } = props;
+    const [opened, setOpened] = (0, _react.useState)(dropdownOpened);
+    const [prevOpened, setPrevOpened] = (0, _react.useState)(dropdownOpened);
+    const popupRef = (0, _react.useRef)(null);
+    const wrappedComponentRef = (0, _react.useRef)(null);
+    if (dropdownOpened !== prevOpened) {
+      setOpened(dropdownOpened);
+      setPrevOpened(dropdownOpened);
     }
-    let k;
-    return e[27] !== R || e[28] !== n ? (k = /* @__PURE__ */ f.jsx(U.Provider, { value: J, children: /* @__PURE__ */ f.jsx(o, { ...n, ...R }) }), e[27] = R, e[28] = n, e[29] = k) : k = e[29], k;
+    const onClickOutside = event => {
+      const {
+        target
+      } = event;
+      if (popupRef !== null && popupRef !== void 0 && popupRef.current && target !== (popupRef === null || popupRef === void 0 ? void 0 : popupRef.current) && !event.composedPath().includes(popupRef.current) && wrappedComponentRef.current !== target) {
+        setOpened(false);
+      }
+    };
+    const onDropdownClick = () => {
+      setOpened(prevState => !prevState);
+    };
+    const getDropdown = targetRef => {
+      if (!targetRef || !opened) return null;
+      wrappedComponentRef.current = targetRef;
+      return /*#__PURE__*/_react.default.createElement(_Popup.default, {
+        targetRef: targetRef,
+        align: dropdownAlign,
+        customClassForDropdown: customClassForDropdown,
+        isFloatMenu: isFloatMenu
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: isFloatMenu ? 'items' : undefined,
+        ref: r => {
+          popupRef.current = r;
+        }
+      }, children));
+    };
+    (0, _react.useEffect)(() => {
+      if (dropdown && closeDropdownOnClickOutside) {
+        document.addEventListener('click', onClickOutside);
+      }
+      return () => {
+        if (dropdown && closeDropdownOnClickOutside) {
+          document.removeEventListener('click', onClickOutside);
+        }
+      };
+    }, []);
+    (0, _react.useEffect)(() => {
+      if (handlerClose) handlerClose(() => setOpened(false));
+    }, [handlerClose]);
+    const contextValues = {
+      handleDropdownClose: onDropdownClick
+    };
+    const newProps = {
+      getDropdownPopup: targetRef => getDropdown(targetRef),
+      showDropdown: !showDropdown ? () => setOpened(!opened) : showDropdown,
+      isDropdownOpened: isDropdownOpened || opened
+    };
+    if (!dropdown) return /*#__PURE__*/_react.default.createElement(WrappedComponent, props);
+    return /*#__PURE__*/_react.default.createElement(WithDropdownContext.Provider, {
+      value: contextValues
+    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, _extends({}, props, newProps)));
   };
-  return A.displayName = `withDropdown(${X(o)})`, A;
-};
-function Y(o) {
-  return !o;
-}
-export {
-  U as WithDropdownContext,
-  oe as default
+  EnhancedComponent.displayName = "withDropdown(".concat(getDisplayName(WrappedComponent), ")");
+  return EnhancedComponent;
 };
+var _default = exports.default = withDropdown;

package/lib/fieldset/index.d.ts

@@ -1,3 +1,8 @@
-import { IFieldsetProps } from './types';
-declare const Fieldset: (props: IFieldsetProps) => import("react/jsx-runtime").JSX.Element | null;
-export default Fieldset;
+import { IFieldsetProps } from './types.js';
+import 'react';
+import '../@types/PermissionAttr.js';
+import '../@types/Position.js';
+
+declare const Fieldset: (props: IFieldsetProps) => JSX.Element | null;
+
+export { Fieldset as default };