@lanaco/lnc-react-ui/dist/index-RrqW9QBJ.cjs

React component library

"use strict";const l=require("react/jsx-runtime"),o=require("react"),O=require("./FlexBox.cjs"),B=require("./IconButton.cjs"),V=require("./ThemeProvider.cjs"),z=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),E=require("./breakpoints-CcVm-gVm.cjs"),L=require("./useDetectMobile-DYV6V1yw.cjs"),W=require("./index-DMbNpyIV.cjs"),C=require("./Button.cjs"),F=require("./Icon.cjs"),M=require("./utils-BK6B_Y9X.cjs"),G=z.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 ${E.down("S")} {
      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 ${E.down("S")} {
    & .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"};
    }
  }
`,_=o.forwardRef(({columnGap:e="2rem",rowGap:m="1.25rem",scrollBySize:d=300,wrapForMobile:v=!1,wrap:i=!1,children:u,methodsRef:f,arrowsVisibleOnHover:p=!0,rightAlignArrows:x=!1,padding:b="0",showTimesBtn:h,noArrows:a,noGradient:y=!1,hideDisabledArrows:c=!1,noMargin:g=!1,...S},k)=>{const j=L.useDetectMobile(),{theme:r}=V.useTheme(),[s,N]=o.useState(!1),[w,q]=o.useState(!1),[D,$]=o.useState(!0),t=o.useRef(),R=()=>{var n;(n=t.current)==null||n.scrollBy(d,0)},T=()=>{var n;(n=t.current)==null||n.scrollBy(-d,0)},[A,H]=o.useState(!1);o.useEffect(()=>{var n,I;H(((n=t==null?void 0:t.current)==null?void 0:n.scrollWidth)>((I=t==null?void 0:t.current)==null?void 0:I.clientWidth))},[u]),o.useImperativeHandle(f,()=>({scrollToEnd(){K()},scrollLeft(){T()},scrollRight(){R()}}));const K=()=>{t.current.scrollLeft=t.current.scrollWidth};return l.jsx(G,{ref:k,arrowsVisibleOnHover:p,hasOverflow:A,noArrows:a,padding:b,rightAlignArrows:x,showTimesBtn:h,theme:r,noMargin:g,...S,children:l.jsxs(O,{ref:t,className:"scrollable-container",columnGap:e,rowGap:m,wrap:i||v&&j?"Wrap":"NoWrap",children:[a!==!0&&l.jsxs(l.Fragment,{children:[!(c===!0&&w===!0)&&l.jsx(B,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-left",color:"neutral",disabled:w,icon:"angle-left",onClick:T}),!(c===!0&&s===!0)&&l.jsx(B,{borderRadius:"curved",btnType:"tinted",className:"scroll-arrow-right",color:"neutral",disabled:s,icon:"angle-right",onClick:R})]}),l.jsx(W.InfiniteScrollEndElement,{isHorizontal:!0,onIsNotVisible:()=>{w===!0&&q(!1)},onIsVisible:()=>{w===!1&&q(!0)}}),u,l.jsx(W.InfiniteScrollEndElement,{className:"right-scroller",isHorizontal:!0,onIsNotVisible:()=>{s===!0&&N(!1),$(!0)},onIsVisible:()=>{s===!1&&N(!0),$(!1)}}),D&&A&&y!==!0&&l.jsx("div",{className:"gradient"})]})})}),P=o.forwardRef((e,m)=>{const{allButton:d=!0,items:v=[],selectedIds:i=[],onSelect:u=()=>{},onRemove:f=()=>{},onSelectAll:p=()=>{},className:x,showTimesBtn:b=!1,labelKey:h="label",valueKey:a="value",codeKey:y="code",uniqueKey:c,typeKey:g,productsToolbarName:S="All",...k}=e,j=(r,s)=>{i!=null&&i.includes(s)?f(r,s):u(r,s)};return l.jsxs(_,{ref:m,arrowsVisibleOnHover:!1,className:x,columnGap:"0.75rem",padding:"0.25rem 0",rightAlignArrows:!0,showTimesBtn:b,...k,children:[d&&l.jsx(C,{borderRadius:"curved",btnType:i.length===0?"filled":"tinted",className:"badge-button",color:"neutral",onClick:p,children:S}),v.map((r,s)=>l.jsxs(C,{borderRadius:"curved",btnType:i.includes(r.uuid)?"filled":"tinted",className:"badge-button",color:"neutral",onClick:()=>j(r,r[a]),children:[M.isDefined(r==null?void 0:r.icon)&&l.jsxs(l.Fragment,{children:[l.jsx("i",{className:r==null?void 0:r.icon})," "]}),r[h],b===!0&&l.jsx(F,{className:"times-btn",icon:"times",sizeInUnits:"0.75rem",onClick:()=>f(r[a],r[h],r[y],c?r[c]:null,g?r[g]:null)})]},s))]})});exports.SelectBar=P;