@lanaco/lnc-react-ui 4.0.160 → 4.0.162

package/dist/index-D0xXo7W6.cjs

@@ -1,98 +0,0 @@
-"use strict";const t=require("react/jsx-runtime"),o=require("react"),r=require("./index-BpbMKBf_.cjs"),D=require("./FlexBox.cjs"),E=require("./IconButton.cjs"),L=require("./ThemeProvider.cjs"),V=require("./emotion-styled.browser.esm-BtEseadx.cjs"),H=require("./consts-goSZX3xP.cjs"),_=require("./useDetectMobile-zkbzoOGV.cjs"),F=require("./useUpdateEffect-BtMgpgIV.cjs"),O=require("./Button.cjs"),G=require("./Icon.cjs"),U=require("./utils-Dl9xPH4c.cjs"),X=V.styled.div`
-  position: relative;
-  padding: ${e=>e.padding};
-
-  & button {
-    white-space: nowrap;
-  }
-
-  & .badge-button {
-    ${e=>e.showTimesBtn===!0&&"padding-left: 0.5rem; padding-right: 0.5rem;"}
-  }
-
-  & .gradient {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 4;
-    transition: ${"0.3s"};
-    right: ${e=>e.noArrows!==!0?"6rem":"0"};
-    width: 2rem;
-    background: #fff;
-    height: 100%;
-    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
-    mask-image: linear-gradient(to left, black 10%, transparent 50%);
-  }
-
-  & .scrollable-container {
-    max-width: -webkit-fill-available;
-    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
-    max-width: fill-available;
-
-    ${e=>e.rightAlignArrows===!0&&e.noArrows!==!0&&"margin-right: 6rem"};
-    scroll-behavior: smooth;
-    overflow: hidden;
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
-
-    @media (max-width: ${H.MOBILE_SIZE_PX+"px"}) {
-      margin-right: 0;
-    }
-  }
-  & .scroll-arrow-right,
-  & .scroll-arrow-left {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    visibility: ${e=>e.arrowsVisibleOnHover===!1&&e.hasOverflow?"visible":"hidden"};
-    z-index: 4;
-    transition: ${"0.3s"};
-  }
-  & .scroll-arrow-right {
-    ${e=>e.rightAlignArrows===!0?"right: 0":"right: 0.7rem"};
-  }
-  & .scroll-arrow-left {
-    ${e=>e.rightAlignArrows===!0?"right: 2.625rem":"left: 0.7rem"};
-  }
-  & .scrollable-container:hover > .scroll-arrow-left,
-  & .scrollable-container:hover > .scroll-arrow-right {
-    visibility: ${e=>e.hasOverflow?"visible":"hidden"};
-  }
-
-  @media (max-width: ${H.MOBILE_SIZE_PX+"px"}) {
-    & .scrollable-container {
-      overflow: auto;
-    }
-    & .scroll-arrow-left,
-    & .scroll-arrow-right {
-      display: none;
-    }
-
-    & .gradient {
-      right: 0;
-    }
-
-    & .scrollable-container button:nth-of-type(3) {
-      ${e=>e.noMargin!==!0&&"margin-left: 1rem"};
-    }
-  }
-`,Z=e=>{const[p,c]=o.useState(!1),l=o.useMemo(()=>new IntersectionObserver(([n])=>c(n.isIntersecting)),[]);return o.useEffect(()=>(l.observe(e.current),()=>{l.disconnect()}),[e,l]),p},J=V.styled.div`
-  min-height: 1px;
-  ${e=>e.isHorizontal===!0?"min-width: 1px; width: 1px;":"width: 100%;"}
-`,j=o.forwardRef((e,p)=>{const{onIsVisible:c=()=>{},onIsNotVisible:l,isHorizontal:n=!1,className:f=""}=e,d=o.useRef(null),b=Z(d);return F.useUpdateEffect(()=>{b?c():l==null||l()},[b]),t.jsx(J,{ref:d,className:`scroller-element ${f}`,isHorizontal:n})});j.propTypes={onIsVisible:r.PropTypes.func,isHorizontal:r.PropTypes.bool};const z=o.forwardRef(({columnGap:e="2rem",rowGap:p="1.25rem",scrollBySize:c=300,wrapForMobile:l=!1,wrap:n=!1,children:f,methodsRef:d,arrowsVisibleOnHover:b=!0,rightAlignArrows:v=!1,padding:m="0",showTimesBtn:w,noArrows:h,noGradient:x=!1,hideDisabledArrows:g=!1,noMargin:y=!1,...P},S)=>{const I=_.useDetectMobile(),{theme:s}=L.useTheme(),[a,k]=o.useState(!1),[T,N]=o.useState(!1),[M,R]=o.useState(!0),i=o.useRef(),$=()=>{var u;(u=i.current)==null||u.scrollBy(c,0)},q=()=>{var u;(u=i.current)==null||u.scrollBy(-c,0)},[B,W]=o.useState(!1);o.useEffect(()=>{var u,A;W(((u=i==null?void 0:i.current)==null?void 0:u.scrollWidth)>((A=i==null?void 0:i.current)==null?void 0:A.clientWidth))},[f]),o.useImperativeHandle(d,()=>({scrollToEnd(){C()},scrollLeft(){q()},scrollRight(){$()}}));const C=()=>{i.current.scrollLeft=i.current.scrollWidth};return t.jsx(X,{ref:S,arrowsVisibleOnHover:b,hasOverflow:B,noArrows:h,padding:m,rightAlignArrows:v,showTimesBtn:w,theme:s,noMargin:y,...P,children:t.jsxs(D,{ref:i,className:"scrollable-container",columnGap:e,rowGap:p,wrap:n||l&&I?"Wrap":"NoWrap",children:[h!==!0&&t.jsxs(t.Fragment,{children:[!(g===!0&&T===!0)&&t.jsx(E,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:T,icon:"angle-left",onClick:q}),!(g===!0&&a===!0)&&t.jsx(E,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:a,icon:"angle-right",onClick:$})]}),t.jsx(j,{isHorizontal:!0,onIsNotVisible:()=>{T===!0&&N(!1)},onIsVisible:()=>{T===!1&&N(!0)}}),f,t.jsx(j,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{a===!0&&k(!1),R(!0)},onIsVisible:()=>{a===!1&&k(!0),R(!1)}}),M&&B&&x!==!0&&t.jsx("div",{className:"gradient"})]})})});z.propTypes={title:r.PropTypes.string,rowGap:r.PropTypes.string,columnGap:r.PropTypes.string,scrollBySize:r.PropTypes.number,wrapForMobile:r.PropTypes.bool,wrap:r.PropTypes.bool,methodsRef:r.PropTypes.any,arrowsVisibleOnHover:r.PropTypes.bool,rightAlignArrows:r.PropTypes.bool,padding:r.PropTypes.string};const K=o.forwardRef((e,p)=>{const{allButton:c=!0,items:l=[],selectedIds:n=[],onSelect:f=()=>{},onRemove:d=()=>{},onSelectAll:b=()=>{},className:v,showTimesBtn:m=!1,labelKey:w="label",valueKey:h="value",codeKey:x="code",uniqueKey:g,typeKey:y,productsToolbarName:P="All",...S}=e,I=(s,a)=>{n!=null&&n.includes(a)?d(s,a):f(s,a)};return t.jsxs(z,{ref:p,arrowsVisibleOnHover:!1,className:v,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:m,...S,children:[c&&t.jsx(O,{borderRadius:"curved",btnType:n.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:b,children:P}),l.map((s,a)=>t.jsxs(O,{borderRadius:"curved",btnType:n.includes(s.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>I(s,s[h]),children:[U.isDefined(s==null?void 0:s.icon)&&t.jsxs(t.Fragment,{children:[t.jsx("i",{className:s==null?void 0:s.icon})," "]}),s[w],m===!0&&t.jsx(G,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>d(s[h],s[w],s[x],g?s[g]:null,y?s[y]:null)})]},a))]})});K.propTypes={allButton:r.PropTypes.bool,items:r.PropTypes.array,selectedIds:r.PropTypes.array,onSelect:r.PropTypes.func,onRemove:r.PropTypes.func,onSelectAll:r.PropTypes.func,className:r.PropTypes.string,showTimesBtn:r.PropTypes.bool,valuKey:r.PropTypes.string,labelKey:r.PropTypes.string,codeKey:r.PropTypes.string};exports.SelectBar=K;

package/dist/index-Dweo-G3H.js

@@ -1,384 +0,0 @@
-import { jsx as n, jsxs as p, Fragment as C } from "react/jsx-runtime";
-import U, { useState as g, useMemo as q, useEffect as M, forwardRef as D, useRef as L, useImperativeHandle as X } from "react";
-import { P as r } from "./index-CblbdqjE.js";
-import Z from "./FlexBox.js";
-import K from "./IconButton.js";
-import { useTheme as J } from "./ThemeProvider.js";
-import { s as G } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as O } from "./consts-BuFChS64.js";
-import { u as Q } from "./useDetectMobile-Bkvj0VMa.js";
-import { u as Y } from "./useUpdateEffect-CuYWz7EA.js";
-import W from "./Button.js";
-import ee from "./Icon.js";
-import { l as re } from "./utils-BdsZgOUE.js";
-const te = G.div`
-  position: relative;
-  padding: ${(e) => e.padding};
-
-  & button {
-    white-space: nowrap;
-  }
-
-  & .badge-button {
-    ${(e) => e.showTimesBtn === !0 && "padding-left: 0.5rem; padding-right: 0.5rem;"}
-  }
-
-  & .gradient {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 4;
-    transition: ${"0.3s"};
-    right: ${(e) => e.noArrows !== !0 ? "6rem" : "0"};
-    width: 2rem;
-    background: #fff;
-    height: 100%;
-    -webkit-mask-image: linear-gradient(to left, black 10%, transparent 50%);
-    mask-image: linear-gradient(to left, black 10%, transparent 50%);
-  }
-
-  & .scrollable-container {
-    max-width: -webkit-fill-available;
-    max-width: -moz-available; /* WebKit-based browsers will ignore this. */
-    max-width: fill-available;
-
-    ${(e) => e.rightAlignArrows === !0 && e.noArrows !== !0 && "margin-right: 6rem"};
-    scroll-behavior: smooth;
-    overflow: hidden;
-    -webkit-overflow-scrolling: touch;
-    ::-webkit-scrollbar {
-      -webkit-appearance: none;
-    }
-    -ms-overflow-style: none;
-    /* Internet Explorer 10+ */
-    scrollbar-width: none;
-    /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-      /* Safari and Chrome */
-    }
-
-    @media (max-width: ${O + "px"}) {
-      margin-right: 0;
-    }
-  }
-  & .scroll-arrow-right,
-  & .scroll-arrow-left {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    visibility: ${(e) => e.arrowsVisibleOnHover === !1 && e.hasOverflow ? "visible" : "hidden"};
-    z-index: 4;
-    transition: ${"0.3s"};
-  }
-  & .scroll-arrow-right {
-    ${(e) => e.rightAlignArrows === !0 ? "right: 0" : "right: 0.7rem"};
-  }
-  & .scroll-arrow-left {
-    ${(e) => e.rightAlignArrows === !0 ? "right: 2.625rem" : "left: 0.7rem"};
-  }
-  & .scrollable-container:hover > .scroll-arrow-left,
-  & .scrollable-container:hover > .scroll-arrow-right {
-    visibility: ${(e) => e.hasOverflow ? "visible" : "hidden"};
-  }
-
-  @media (max-width: ${O + "px"}) {
-    & .scrollable-container {
-      overflow: auto;
-    }
-    & .scroll-arrow-left,
-    & .scroll-arrow-right {
-      display: none;
-    }
-
-    & .gradient {
-      right: 0;
-    }
-
-    & .scrollable-container button:nth-of-type(3) {
-      ${(e) => e.noMargin !== !0 && "margin-left: 1rem"};
-    }
-  }
-`, le = (e) => {
-  const [u, a] = g(!1), l = q(
-    () => new IntersectionObserver(
-      ([o]) => a(o.isIntersecting)
-    ),
-    []
-  );
-  return M(() => (l.observe(e.current), () => {
-    l.disconnect();
-  }), [e, l]), u;
-}, oe = G.div`
-  min-height: 1px;
-  ${(e) => e.isHorizontal === !0 ? "min-width: 1px; width: 1px;" : "width: 100%;"}
-`, T = D((e, u) => {
-  const {
-    onIsVisible: a = () => {
-    },
-    onIsNotVisible: l,
-    isHorizontal: o = !1,
-    className: f = ""
-  } = e, d = L(null), b = le(d);
-  return Y(() => {
-    b ? a() : l == null || l();
-  }, [b]), /* @__PURE__ */ n(
-    oe,
-    {
-      ref: d,
-      className: `scroller-element ${f}`,
-      isHorizontal: o
-    }
-  );
-});
-T.propTypes = {
-  onIsVisible: r.func,
-  /**
-   * For horizontal scroll InfiniteScrollEndElement has to have some widh otherwise it won't ever be visible and trigger onIsVisible callback
-   */
-  isHorizontal: r.bool
-};
-const _ = U.forwardRef(
-  ({
-    columnGap: e = "2rem",
-    rowGap: u = "1.25rem",
-    scrollBySize: a = 300,
-    wrapForMobile: l = !1,
-    wrap: o = !1,
-    children: f,
-    methodsRef: d,
-    arrowsVisibleOnHover: b = !0,
-    rightAlignArrows: I = !1,
-    padding: w = "0",
-    showTimesBtn: v,
-    noArrows: m,
-    noGradient: S = !1,
-    hideDisabledArrows: h = !1,
-    noMargin: y = !1,
-    ...k
-  }, N) => {
-    const $ = Q(), { theme: t } = J(), [i, A] = g(!1), [x, R] = g(!1), [F, B] = g(!0), s = L(), H = () => {
-      var c;
-      (c = s.current) == null || c.scrollBy(a, 0);
-    }, V = () => {
-      var c;
-      (c = s.current) == null || c.scrollBy(-a, 0);
-    }, [z, j] = g(!1);
-    M(() => {
-      var c, E;
-      j(
-        ((c = s == null ? void 0 : s.current) == null ? void 0 : c.scrollWidth) > ((E = s == null ? void 0 : s.current) == null ? void 0 : E.clientWidth)
-      );
-    }, [f]), X(d, () => ({
-      scrollToEnd() {
-        P();
-      },
-      scrollLeft() {
-        V();
-      },
-      scrollRight() {
-        H();
-      }
-    }));
-    const P = () => {
-      s.current.scrollLeft = s.current.scrollWidth;
-    };
-    return /* @__PURE__ */ n(
-      te,
-      {
-        ref: N,
-        arrowsVisibleOnHover: b,
-        hasOverflow: z,
-        noArrows: m,
-        padding: w,
-        rightAlignArrows: I,
-        showTimesBtn: v,
-        theme: t,
-        noMargin: y,
-        ...k,
-        children: /* @__PURE__ */ p(
-          Z,
-          {
-            ref: s,
-            className: "scrollable-container",
-            columnGap: e,
-            rowGap: u,
-            wrap: o || l && $ ? "Wrap" : "NoWrap",
-            children: [
-              m !== !0 && /* @__PURE__ */ p(C, { children: [
-                !(h === !0 && x === !0) && /* @__PURE__ */ n(
-                  K,
-                  {
-                    borderRadius: "curved",
-                    btnType: "tinted",
-                    className: "scroll-arrow-left",
-                    color: "neutral",
-                    disabled: x,
-                    icon: "angle-left",
-                    onClick: V
-                  }
-                ),
-                !(h === !0 && i === !0) && /* @__PURE__ */ n(
-                  K,
-                  {
-                    borderRadius: "curved",
-                    btnType: "tinted",
-                    className: "scroll-arrow-right",
-                    color: "neutral",
-                    disabled: i,
-                    icon: "angle-right",
-                    onClick: H
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ n(
-                T,
-                {
-                  isHorizontal: !0,
-                  onIsNotVisible: () => {
-                    x === !0 && R(!1);
-                  },
-                  onIsVisible: () => {
-                    x === !1 && R(!0);
-                  }
-                }
-              ),
-              f,
-              /* @__PURE__ */ n(
-                T,
-                {
-                  className: "right-scroller",
-                  isHorizontal: !0,
-                  onIsNotVisible: () => {
-                    i === !0 && A(!1), B(!0);
-                  },
-                  onIsVisible: () => {
-                    i === !1 && A(!0), B(!1);
-                  }
-                }
-              ),
-              F && z && S !== !0 && /* @__PURE__ */ n("div", { className: "gradient" })
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-_.propTypes = {
-  title: r.string,
-  rowGap: r.string,
-  columnGap: r.string,
-  scrollBySize: r.number,
-  wrapForMobile: r.bool,
-  wrap: r.bool,
-  methodsRef: r.any,
-  arrowsVisibleOnHover: r.bool,
-  rightAlignArrows: r.bool,
-  padding: r.string
-};
-const se = D((e, u) => {
-  const {
-    allButton: a = !0,
-    items: l = [],
-    selectedIds: o = [],
-    onSelect: f = () => {
-    },
-    onRemove: d = () => {
-    },
-    onSelectAll: b = () => {
-    },
-    className: I,
-    showTimesBtn: w = !1,
-    labelKey: v = "label",
-    valueKey: m = "value",
-    codeKey: S = "code",
-    uniqueKey: h,
-    typeKey: y,
-    productsToolbarName: k = "All",
-    ...N
-  } = e, $ = (t, i) => {
-    o != null && o.includes(i) ? d(t, i) : f(t, i);
-  };
-  return /* @__PURE__ */ p(
-    _,
-    {
-      ref: u,
-      arrowsVisibleOnHover: !1,
-      className: I,
-      columnGap: "0.75rem",
-      padding: "0.25rem 0",
-      rightAlignArrows: !0,
-      showTimesBtn: w,
-      ...N,
-      children: [
-        a && /* @__PURE__ */ n(
-          W,
-          {
-            borderRadius: "curved",
-            btnType: o.length === 0 ? "filled" : "tinted",
-            className: "badge-button",
-            color: "neutral",
-            onClick: b,
-            children: k
-          }
-        ),
-        l.map((t, i) => /* @__PURE__ */ p(
-          W,
-          {
-            borderRadius: "curved",
-            btnType: o.includes(t.uuid) ? "filled" : "tinted",
-            className: "badge-button",
-            color: "neutral",
-            onClick: () => $(t, t[m]),
-            children: [
-              re(t == null ? void 0 : t.icon) && /* @__PURE__ */ p(C, { children: [
-                /* @__PURE__ */ n("i", { className: t == null ? void 0 : t.icon }),
-                " "
-              ] }),
-              t[v],
-              w === !0 && /* @__PURE__ */ n(
-                ee,
-                {
-                  className: "times-btn",
-                  icon: "times",
-                  sizeInUnits: "0.75rem",
-                  onClick: () => d(
-                    t[m],
-                    t[v],
-                    t[S],
-                    h ? t[h] : null,
-                    y ? t[y] : null
-                  )
-                }
-              )
-            ]
-          },
-          i
-        ))
-      ]
-    }
-  );
-});
-se.propTypes = {
-  allButton: r.bool,
-  items: r.array,
-  selectedIds: r.array,
-  onSelect: r.func,
-  onRemove: r.func,
-  onSelectAll: r.func,
-  className: r.string,
-  showTimesBtn: r.bool,
-  valuKey: r.string,
-  labelKey: r.string,
-  codeKey: r.string
-};
-export {
-  se as S
-};