@bigbinary/neeto-molecules 4.1.67 → 4.1.69

package/dist/v2/HelpPopover.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Popover, Typography } from '@bigbinary/neeto-atoms';
+import { Popover, Typography, Button } from '@bigbinary/neeto-atoms';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -10,7 +10,7 @@ import 'react';
 
 var SIZE = {
   "default": 16,
-  large: 20
+  large: 18
 };
 
 var _excluded = ["label"];
@@ -38,7 +38,9 @@ var HelpPopover = function HelpPopover(_ref) {
     alignOffset: alignOffset,
     position: position,
     sideOffset: sideOffset,
+    className: "!max-w-[calc(100vw-2rem)]",
     closeDelay: 150,
+    collisionPadding: 12,
     openDelay: 0,
     trigger: /*#__PURE__*/jsx("button", {
       "data-testid": "help-popover-button",
@@ -71,14 +73,18 @@ var HelpPopover = function HelpPopover(_ref) {
       }) : description, helpLinkProps && function () {
         var linkLabel = helpLinkProps.label,
           restLinkProps = _objectWithoutProperties(helpLinkProps, _excluded);
-        return /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({
-          className: "text-primary mt-3 text-sm hover:underline",
-          "data-testid": "help-popover-link-button",
-          rel: "noreferrer",
-          target: "_blank"
-        }, restLinkProps), {}, {
-          children: linkLabel !== null && linkLabel !== void 0 ? linkLabel : t("neetoMolecules.common.viewHelpArticle")
-        }));
+        return /*#__PURE__*/jsx(Button, {
+          asChild: true,
+          className: "mt-3 self-start",
+          variant: "link",
+          children: /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({
+            "data-testid": "help-popover-link-button",
+            rel: "noreferrer",
+            target: "_blank"
+          }, restLinkProps), {}, {
+            children: linkLabel !== null && linkLabel !== void 0 ? linkLabel : t("neetoMolecules.common.viewHelpArticle")
+          }))
+        });
       }()]
     })
   });

package/dist/v2/HelpPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPopover.js","sources":["../../src/v2/components/HelpPopover/constants.js","../../src/v2/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 20 };\n","import { Popover, Typography } from \"@bigbinary/neeto-atoms\";\nimport classNames from \"classnames\";\nimport { CircleHelp } from \"lucide-react\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n  title,\n  size = \"large\",\n  description,\n  helpLinkProps,\n  className,\n  iconColor = \"currentColor\",\n  icon: IconComponent = CircleHelp,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}) => {\n  const { t } = useTranslation();\n\n  const position = align && align !== \"center\" ? `${side}-${align}` : side;\n\n  return (\n    <Popover\n      {...{ alignOffset, position, sideOffset }}\n      closeDelay={150}\n      openDelay={0}\n      trigger={\n        <button\n          data-testid=\"help-popover-button\"\n          type=\"button\"\n          className={classNames(\n            \"inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0\",\n            className\n          )}\n        >\n          <IconComponent color={iconColor} size={SIZE[size]} />\n        </button>\n      }\n    >\n      <div className=\"flex flex-col\" onClick={event => event.stopPropagation()}>\n        {title && (\n          <Typography asChild variant=\"body2\" weight=\"semibold\">\n            <h3 className=\"mb-2\" data-testid=\"help-popover-title\">\n              {title}\n            </h3>\n          </Typography>\n        )}\n        {typeof description === \"string\" ? (\n          <Typography\n            color=\"muted\"\n            data-testid=\"help-popover-description\"\n            variant=\"body2\"\n          >\n            {description}\n          </Typography>\n        ) : (\n          description\n        )}\n        {helpLinkProps &&\n          (() => {\n            const { label: linkLabel, ...restLinkProps } = helpLinkProps;\n\n            return (\n              <a\n                className=\"text-primary mt-3 text-sm hover:underline\"\n                data-testid=\"help-popover-link-button\"\n                rel=\"noreferrer\"\n                target=\"_blank\"\n                {...restLinkProps}\n              >\n                {linkLabel ?? t(\"neetoMolecules.common.viewHelpArticle\")}\n              </a>\n            );\n          })()}\n      </div>\n    </Popover>\n  );\n};\n\nHelpPopover.propTypes = {\n  title: PropTypes.string,\n  size: PropTypes.oneOf([\"default\", \"large\"]),\n  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  helpLinkProps: PropTypes.object,\n  className: PropTypes.string,\n  iconColor: PropTypes.string,\n  icon: PropTypes.node,\n  side: PropTypes.oneOf([\"top\", \"right\", \"bottom\", \"left\"]),\n  sideOffset: PropTypes.number,\n  align: PropTypes.oneOf([\"start\", \"center\", \"end\"]),\n  alignOffset: PropTypes.number,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","CircleHelp","side","sideOffset","align","alignOffset","_useTranslation","useTranslation","t","position","concat","_jsx","Popover","closeDelay","openDelay","trigger","type","classNames","children","color","_jsxs","onClick","event","stopPropagation","Typography","asChild","variant","weight","linkLabel","label","restLinkProps","_objectWithoutProperties","_excluded","_objectSpread","rel","target"],"mappings":"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"}
+{"version":3,"file":"HelpPopover.js","sources":["../../src/v2/components/HelpPopover/constants.js","../../src/v2/components/HelpPopover/index.jsx"],"sourcesContent":["export const SIZE = { default: 16, large: 18 };\n","import { Button, Popover, Typography } from \"@bigbinary/neeto-atoms\";\nimport classNames from \"classnames\";\nimport { CircleHelp } from \"lucide-react\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { SIZE } from \"./constants\";\n\nconst HelpPopover = ({\n  title,\n  size = \"large\",\n  description,\n  helpLinkProps,\n  className,\n  iconColor = \"currentColor\",\n  icon: IconComponent = CircleHelp,\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}) => {\n  const { t } = useTranslation();\n\n  const position = align && align !== \"center\" ? `${side}-${align}` : side;\n\n  return (\n    <Popover\n      {...{ alignOffset, position, sideOffset }}\n      className=\"!max-w-[calc(100vw-2rem)]\"\n      closeDelay={150}\n      collisionPadding={12}\n      openDelay={0}\n      trigger={\n        <button\n          data-testid=\"help-popover-button\"\n          type=\"button\"\n          className={classNames(\n            \"inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0\",\n            className\n          )}\n        >\n          <IconComponent color={iconColor} size={SIZE[size]} />\n        </button>\n      }\n    >\n      <div className=\"flex flex-col\" onClick={event => event.stopPropagation()}>\n        {title && (\n          <Typography asChild variant=\"body2\" weight=\"semibold\">\n            <h3 className=\"mb-2\" data-testid=\"help-popover-title\">\n              {title}\n            </h3>\n          </Typography>\n        )}\n        {typeof description === \"string\" ? (\n          <Typography\n            color=\"muted\"\n            data-testid=\"help-popover-description\"\n            variant=\"body2\"\n          >\n            {description}\n          </Typography>\n        ) : (\n          description\n        )}\n        {helpLinkProps &&\n          (() => {\n            const { label: linkLabel, ...restLinkProps } = helpLinkProps;\n\n            return (\n              <Button asChild className=\"mt-3 self-start\" variant=\"link\">\n                <a\n                  data-testid=\"help-popover-link-button\"\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  {...restLinkProps}\n                >\n                  {linkLabel ?? t(\"neetoMolecules.common.viewHelpArticle\")}\n                </a>\n              </Button>\n            );\n          })()}\n      </div>\n    </Popover>\n  );\n};\n\nHelpPopover.propTypes = {\n  title: PropTypes.string,\n  size: PropTypes.oneOf([\"default\", \"large\"]),\n  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  helpLinkProps: PropTypes.object,\n  className: PropTypes.string,\n  iconColor: PropTypes.string,\n  icon: PropTypes.node,\n  side: PropTypes.oneOf([\"top\", \"right\", \"bottom\", \"left\"]),\n  sideOffset: PropTypes.number,\n  align: PropTypes.oneOf([\"start\", \"center\", \"end\"]),\n  alignOffset: PropTypes.number,\n};\n\nexport default HelpPopover;\n"],"names":["SIZE","large","HelpPopover","_ref","title","_ref$size","size","description","helpLinkProps","className","_ref$iconColor","iconColor","_ref$icon","icon","IconComponent","CircleHelp","side","sideOffset","align","alignOffset","_useTranslation","useTranslation","t","position","concat","_jsx","Popover","closeDelay","collisionPadding","openDelay","trigger","type","classNames","children","color","_jsxs","onClick","event","stopPropagation","Typography","asChild","variant","weight","linkLabel","label","restLinkProps","_objectWithoutProperties","_excluded","Button","_objectSpread","rel","target"],"mappings":";;;;;;;;;;AAAO,IAAMA,IAAI,GAAG;AAAE,EAAA,SAAA,EAAS,EAAE;AAAEC,EAAAA,KAAK,EAAE;AAAG,CAAC;;;;;ACQ9C,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAYX;AAAA,EAAA,IAXJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,SAAA,GAAAF,IAAA,CACLG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAA,MAAA,GAAG,OAAO,GAAAA,SAAA;IACdE,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,aAAa,GAAAL,IAAA,CAAbK,aAAa;IACbC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAAC,cAAA,GAAAP,IAAA,CACTQ,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAA,MAAA,GAAG,cAAc,GAAAA,cAAA;IAAAE,SAAA,GAAAT,IAAA,CAC1BU,IAAI;AAAEC,IAAAA,aAAa,GAAAF,SAAA,KAAA,MAAA,GAAGG,kBAAU,GAAAH,SAAA;IAChCI,IAAI,GAAAb,IAAA,CAAJa,IAAI;IACJC,UAAU,GAAAd,IAAA,CAAVc,UAAU;IACVC,KAAK,GAAAf,IAAA,CAALe,KAAK;IACLC,WAAW,GAAAhB,IAAA,CAAXgB,WAAW;AAEX,EAAA,IAAAC,eAAA,GAAcC,cAAc,EAAE;IAAtBC,CAAC,GAAAF,eAAA,CAADE,CAAC;AAET,EAAA,IAAMC,QAAQ,GAAGL,KAAK,IAAIA,KAAK,KAAK,QAAQ,GAAA,EAAA,CAAAM,MAAA,CAAMR,IAAI,EAAA,GAAA,CAAA,CAAAQ,MAAA,CAAIN,KAAK,IAAKF,IAAI;EAExE,oBACES,GAAA,CAACC,OAAO,EAAA;AACAP,IAAAA,WAAW,EAAXA,WAAW;AAAEI,IAAAA,QAAQ,EAARA,QAAQ;AAAEN,IAAAA,UAAU,EAAVA,UAAU;AACvCR,IAAAA,SAAS,EAAC,2BAA2B;AACrCkB,IAAAA,UAAU,EAAE,GAAI;AAChBC,IAAAA,gBAAgB,EAAE,EAAG;AACrBC,IAAAA,SAAS,EAAE,CAAE;AACbC,IAAAA,OAAO,eACLL,GAAA,CAAA,QAAA,EAAA;AACE,MAAA,aAAA,EAAY,qBAAqB;AACjCM,MAAAA,IAAI,EAAC,QAAQ;AACbtB,MAAAA,SAAS,EAAEuB,UAAU,CACnB,oGAAoG,EACpGvB,SACF,CAAE;MAAAwB,QAAA,eAEFR,GAAA,CAACX,aAAa,EAAA;AAACoB,QAAAA,KAAK,EAAEvB,SAAU;QAACL,IAAI,EAAEN,IAAI,CAACM,IAAI;OAAI;AAAC,KAC/C,CACT;AAAA2B,IAAAA,QAAA,eAEDE,IAAA,CAAA,KAAA,EAAA;AAAK1B,MAAAA,SAAS,EAAC,eAAe;AAAC2B,MAAAA,OAAO,EAAE,SAATA,OAAOA,CAAEC,KAAK,EAAA;AAAA,QAAA,OAAIA,KAAK,CAACC,eAAe,EAAE;MAAA,CAAC;AAAAL,MAAAA,QAAA,EAAA,CACtE7B,KAAK,iBACJqB,GAAA,CAACc,UAAU,EAAA;QAACC,OAAO,EAAA,IAAA;AAACC,QAAAA,OAAO,EAAC,OAAO;AAACC,QAAAA,MAAM,EAAC,UAAU;AAAAT,QAAAA,QAAA,eACnDR,GAAA,CAAA,IAAA,EAAA;AAAIhB,UAAAA,SAAS,EAAC,MAAM;AAAC,UAAA,aAAA,EAAY,oBAAoB;AAAAwB,UAAAA,QAAA,EAClD7B;SACC;OACM,CACb,EACA,OAAOG,WAAW,KAAK,QAAQ,gBAC9BkB,GAAA,CAACc,UAAU,EAAA;AACTL,QAAAA,KAAK,EAAC,OAAO;AACb,QAAA,aAAA,EAAY,0BAA0B;AACtCO,QAAAA,OAAO,EAAC,OAAO;AAAAR,QAAAA,QAAA,EAEd1B;AAAW,OACF,CAAC,GAEbA,WACD,EACAC,aAAa,IACX,YAAM;AACL,QAAA,IAAemC,SAAS,GAAuBnC,aAAa,CAApDoC,KAAK;AAAgBC,UAAAA,aAAa,GAAAC,wBAAA,CAAKtC,aAAa,EAAAuC,SAAA,CAAA;QAE5D,oBACEtB,GAAA,CAACuB,MAAM,EAAA;UAACR,OAAO,EAAA,IAAA;AAAC/B,UAAAA,SAAS,EAAC,iBAAiB;AAACgC,UAAAA,OAAO,EAAC,MAAM;AAAAR,UAAAA,QAAA,eACxDR,GAAA,CAAA,GAAA,EAAAwB,aAAA,CAAAA,aAAA,CAAA;AACE,YAAA,aAAA,EAAY,0BAA0B;AACtCC,YAAAA,GAAG,EAAC,YAAY;AAChBC,YAAAA,MAAM,EAAC;AAAQ,WAAA,EACXN,aAAa,CAAA,EAAA,EAAA,EAAA;YAAAZ,QAAA,EAEhBU,SAAS,KAAA,IAAA,IAATA,SAAS,cAATA,SAAS,GAAIrB,CAAC,CAAC,uCAAuC;WAAC,CACvD;AAAC,SACE,CAAC;AAEb,MAAA,CAAC,EAAG;KACH;AAAC,GACC,CAAC;AAEd;;;;"}

package/dist/v2/Search.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useId, useState, useRef, useEffect } from 'react';
-import { Label, Input } from '@bigbinary/neeto-atoms';
+import { Input } from '@bigbinary/neeto-atoms';
 import useFuncDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
 import useQueryParams from '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
 import useUpdateEffect from '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
@@ -11,7 +11,7 @@ import { mergeLeft, omit } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { S as Search$1 } from '../search-DCgpNjip.js';
 import '../createLucideIcon-mNMhCCpf.js';
 
@@ -101,26 +101,16 @@ var Search = function Search(_ref) {
   useEffect(function () {
     return handleDebouncedSearchTermChange.cancel;
   }, []);
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx(Input, _objectSpread({
     className: className,
-    children: [label && /*#__PURE__*/jsx(Label, {
-      className: "mb-1",
-      htmlFor: inputId,
-      children: label
-    }), /*#__PURE__*/jsxs("div", {
-      className: "relative",
-      children: [/*#__PURE__*/jsx(Search$1, {
-        className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
-      }), /*#__PURE__*/jsx(Input, _objectSpread({
-        className: "pl-9 [&::-webkit-search-cancel-button:hover]:cursor-pointer [&::-webkit-search-decoration:hover]:cursor-pointer",
-        id: inputId,
-        placeholder: t("neetoMolecules.common.actions.search"),
-        type: "search",
-        value: internalValue,
-        onChange: handleOnChange
-      }, inputProps))]
-    })]
-  });
+    label: label,
+    id: inputId,
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/jsx(Search$1, {}),
+    type: "search",
+    value: internalValue,
+    onChange: handleOnChange
+  }, inputProps));
 };
 
 export { Search as default };

package/dist/v2/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/v2/components/Search/utils.js","../../src/v2/components/Search/index.jsx"],"sourcesContent":["import { getQueryParams } from \"neetocommons/utils\";\n\nexport const getInitialSearchValue = ({\n  initialValue = \"\",\n  enableUrlSync,\n  searchParamName,\n}) => {\n  if (enableUrlSync) {\n    const queryParams = getQueryParams({ toCamelCase: false });\n\n    return queryParams[searchParamName] ?? \"\";\n  }\n\n  return initialValue;\n};\n","import { useEffect, useId, useRef, useState } from \"react\";\n\nimport { Input, Label } from \"@bigbinary/neeto-atoms\";\nimport { Search as SearchIcon } from \"lucide-react\";\nimport useFuncDebounce from \"neetocommons/react-utils/useFuncDebounce\";\nimport useQueryParams from \"neetocommons/react-utils/useQueryParams\";\nimport useUpdateEffect from \"neetocommons/react-utils/useUpdateEffect\";\nimport { buildUrl } from \"neetocommons/utils/general\";\nimport PropTypes from \"prop-types\";\nimport { mergeLeft, omit } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\nimport { useHistory } from \"react-router-dom\";\n\nimport { getInitialSearchValue } from \"./utils\";\n\nconst Search = ({\n  value,\n  debounceTime = 300,\n  onSearch,\n  onChange,\n  enableUrlSync = false,\n  searchParamName = \"search_term\",\n  className,\n  label,\n  ...inputProps\n}) => {\n  const { t } = useTranslation();\n  const queryParams = useQueryParams({ toCamelCase: false });\n  const history = useHistory();\n  const inputId = useId();\n\n  const [internalValue, setInternalValue] = useState(\n    getInitialSearchValue({\n      initialValue: value,\n      enableUrlSync,\n      searchParamName,\n    })\n  );\n  const trimmedValue = value?.trim();\n\n  useUpdateEffect(() => {\n    if (!enableUrlSync) return;\n\n    const searchParamValue = queryParams?.[searchParamName] ?? \"\";\n    setInternalValue(searchParamValue);\n  }, [queryParams?.[searchParamName]]);\n\n  const handleSearchQueryParams = trimmedValue => {\n    if (!trimmedValue && !queryParams?.[searchParamName]) return;\n\n    if (trimmedValue === queryParams?.[searchParamName]) return;\n\n    const pathname = history.location.pathname;\n\n    if (trimmedValue) {\n      history.push(\n        buildUrl(\n          pathname,\n          mergeLeft({ [searchParamName]: trimmedValue }, queryParams)\n        )\n      );\n    } else {\n      history.push(buildUrl(pathname, omit([searchParamName], queryParams)));\n    }\n  };\n\n  const handleDebouncedSearchTermChange = useFuncDebounce(trimmedValue => {\n    if (onSearch) onSearch(trimmedValue);\n    else if (enableUrlSync) handleSearchQueryParams(trimmedValue);\n  }, debounceTime);\n\n  useUpdateEffect(() => {\n    handleDebouncedSearchTermChange(trimmedValue);\n  }, [trimmedValue]);\n\n  const prevValueRef = useRef(value);\n  if (value !== undefined && value !== prevValueRef.current) {\n    setInternalValue(value);\n    prevValueRef.current = value;\n  }\n\n  const handleOnChange = e => {\n    const trimmedValue = e.target.value?.trim();\n    onChange?.(e);\n    setInternalValue(e.target.value);\n\n    if (internalValue?.trim() !== trimmedValue) {\n      handleDebouncedSearchTermChange(trimmedValue);\n    }\n  };\n\n  useEffect(() => handleDebouncedSearchTermChange.cancel, []);\n\n  return (\n    <div {...{ className }}>\n      {label && (\n        <Label className=\"mb-1\" htmlFor={inputId}>\n          {label}\n        </Label>\n      )}\n      <div className=\"relative\">\n        <SearchIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n        <Input\n          className=\"pl-9 [&::-webkit-search-cancel-button:hover]:cursor-pointer [&::-webkit-search-decoration:hover]:cursor-pointer\"\n          id={inputId}\n          placeholder={t(\"neetoMolecules.common.actions.search\")}\n          type=\"search\"\n          value={internalValue}\n          onChange={handleOnChange}\n          {...inputProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  debounceTime: PropTypes.number,\n  onChange: PropTypes.func,\n  onSearch: PropTypes.func,\n  enableUrlSync: PropTypes.bool,\n  searchParamName: PropTypes.string,\n  inputProps: PropTypes.object,\n};\n\nexport default Search;\n"],"names":["getInitialSearchValue","_ref","_ref$initialValue","initialValue","enableUrlSync","searchParamName","_queryParams$searchPa","queryParams","getQueryParams","toCamelCase","Search","value","_ref$debounceTime","debounceTime","onSearch","onChange","_ref$enableUrlSync","_ref$searchParamName","className","label","inputProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","useQueryParams","history","useHistory","inputId","useId","_useState","useState","_useState2","_slicedToArray","internalValue","setInternalValue","trimmedValue","trim","useUpdateEffect","searchParamValue","handleSearchQueryParams","pathname","location","push","buildUrl","mergeLeft","_defineProperty","omit","handleDebouncedSearchTermChange","useFuncDebounce","prevValueRef","useRef","undefined","current","handleOnChange","e","_e$target$value","target","useEffect","cancel","_jsxs","children","_jsx","Label","htmlFor","SearchIcon","Input","_objectSpread","id","placeholder","type"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../src/v2/components/Search/utils.js","../../src/v2/components/Search/index.jsx"],"sourcesContent":["import { getQueryParams } from \"neetocommons/utils\";\n\nexport const getInitialSearchValue = ({\n  initialValue = \"\",\n  enableUrlSync,\n  searchParamName,\n}) => {\n  if (enableUrlSync) {\n    const queryParams = getQueryParams({ toCamelCase: false });\n\n    return queryParams[searchParamName] ?? \"\";\n  }\n\n  return initialValue;\n};\n","import { useEffect, useId, useRef, useState } from \"react\";\n\nimport { Input } from \"@bigbinary/neeto-atoms\";\nimport { Search as SearchIcon } from \"lucide-react\";\nimport useFuncDebounce from \"neetocommons/react-utils/useFuncDebounce\";\nimport useQueryParams from \"neetocommons/react-utils/useQueryParams\";\nimport useUpdateEffect from \"neetocommons/react-utils/useUpdateEffect\";\nimport { buildUrl } from \"neetocommons/utils/general\";\nimport PropTypes from \"prop-types\";\nimport { mergeLeft, omit } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\nimport { useHistory } from \"react-router-dom\";\n\nimport { getInitialSearchValue } from \"./utils\";\n\nconst Search = ({\n  value,\n  debounceTime = 300,\n  onSearch,\n  onChange,\n  enableUrlSync = false,\n  searchParamName = \"search_term\",\n  className,\n  label,\n  ...inputProps\n}) => {\n  const { t } = useTranslation();\n  const queryParams = useQueryParams({ toCamelCase: false });\n  const history = useHistory();\n  const inputId = useId();\n\n  const [internalValue, setInternalValue] = useState(\n    getInitialSearchValue({\n      initialValue: value,\n      enableUrlSync,\n      searchParamName,\n    })\n  );\n  const trimmedValue = value?.trim();\n\n  useUpdateEffect(() => {\n    if (!enableUrlSync) return;\n\n    const searchParamValue = queryParams?.[searchParamName] ?? \"\";\n    setInternalValue(searchParamValue);\n  }, [queryParams?.[searchParamName]]);\n\n  const handleSearchQueryParams = trimmedValue => {\n    if (!trimmedValue && !queryParams?.[searchParamName]) return;\n\n    if (trimmedValue === queryParams?.[searchParamName]) return;\n\n    const pathname = history.location.pathname;\n\n    if (trimmedValue) {\n      history.push(\n        buildUrl(\n          pathname,\n          mergeLeft({ [searchParamName]: trimmedValue }, queryParams)\n        )\n      );\n    } else {\n      history.push(buildUrl(pathname, omit([searchParamName], queryParams)));\n    }\n  };\n\n  const handleDebouncedSearchTermChange = useFuncDebounce(trimmedValue => {\n    if (onSearch) onSearch(trimmedValue);\n    else if (enableUrlSync) handleSearchQueryParams(trimmedValue);\n  }, debounceTime);\n\n  useUpdateEffect(() => {\n    handleDebouncedSearchTermChange(trimmedValue);\n  }, [trimmedValue]);\n\n  const prevValueRef = useRef(value);\n  if (value !== undefined && value !== prevValueRef.current) {\n    setInternalValue(value);\n    prevValueRef.current = value;\n  }\n\n  const handleOnChange = e => {\n    const trimmedValue = e.target.value?.trim();\n    onChange?.(e);\n    setInternalValue(e.target.value);\n\n    if (internalValue?.trim() !== trimmedValue) {\n      handleDebouncedSearchTermChange(trimmedValue);\n    }\n  };\n\n  useEffect(() => handleDebouncedSearchTermChange.cancel, []);\n\n  return (\n    <Input\n      {...{ className, label }}\n      id={inputId}\n      placeholder={t(\"neetoMolecules.common.actions.search\")}\n      prefix={<SearchIcon />}\n      type=\"search\"\n      value={internalValue}\n      onChange={handleOnChange}\n      {...inputProps}\n    />\n  );\n};\n\nSearch.propTypes = {\n  value: PropTypes.string,\n  debounceTime: PropTypes.number,\n  onChange: PropTypes.func,\n  onSearch: PropTypes.func,\n  enableUrlSync: PropTypes.bool,\n  searchParamName: PropTypes.string,\n  inputProps: PropTypes.object,\n};\n\nexport default Search;\n"],"names":["getInitialSearchValue","_ref","_ref$initialValue","initialValue","enableUrlSync","searchParamName","_queryParams$searchPa","queryParams","getQueryParams","toCamelCase","Search","value","_ref$debounceTime","debounceTime","onSearch","onChange","_ref$enableUrlSync","_ref$searchParamName","className","label","inputProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","useQueryParams","history","useHistory","inputId","useId","_useState","useState","_useState2","_slicedToArray","internalValue","setInternalValue","trimmedValue","trim","useUpdateEffect","searchParamValue","handleSearchQueryParams","pathname","location","push","buildUrl","mergeLeft","_defineProperty","omit","handleDebouncedSearchTermChange","useFuncDebounce","prevValueRef","useRef","undefined","current","handleOnChange","e","_e$target$value","target","useEffect","cancel","_jsx","Input","_objectSpread","id","placeholder","prefix","SearchIcon","type"],"mappings":"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"}

package/dist/v2/Sidebar.js

@@ -1,13 +1,13 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { memo, useState, Fragment, useRef, useEffect, useCallback, useMemo } from 'react';
-import { SidebarMenuItem, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuSub, SidebarProvider, Sidebar as Sidebar$1, SidebarHeader, SidebarTrigger, SidebarContent, SidebarRail } from '@bigbinary/neeto-atoms/primitives';
+import { SidebarMenuItem, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuSub, SidebarProvider, useSidebar, Sidebar as Sidebar$1, SidebarHeader, SidebarTrigger, SidebarContent, SidebarRail } from '@bigbinary/neeto-atoms/primitives';
 import { capitalize, isPresent, hyphenate, isNotEmpty, isNot } from '@bigbinary/neeto-cist';
 import useLocalStorage from '@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage';
 import { append, is, findLast } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useHistory } from 'react-router-dom';
 import { u as useKeyboardShortcutsPaneState } from '../useKeyboardShortcutsPaneState-dNIbb_PI.js';
-import { S as SPECIAL_APP_NAMES, D as DEFAULT_HOME_PATH, f as filterByPermissions, a as CheckPointNavLinks, P as PINNED_MORE_NAV_LINKS_KEY, b as SubLinkItem, c as SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, g as getSidebarStateLocalStorageKey, d as SIDEBAR_WIDTH_KEY, e as DEFAULT_SIDEBAR_WIDTH, C as ConfigureView, h as getActiveConfigurePageLink, M as MIN_SIDEBAR_WIDTH, i as MAX_SIDEBAR_WIDTH } from '../ConfigureView-CLhj1NR4.js';
+import { S as SPECIAL_APP_NAMES, D as DEFAULT_HOME_PATH, f as filterByPermissions, a as CheckPointNavLinks, P as PINNED_MORE_NAV_LINKS_KEY, b as SubLinkItem, g as getSidebarStateLocalStorageKey, c as SIDEBAR_WIDTH_KEY, d as DEFAULT_SIDEBAR_WIDTH, e as SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, C as ConfigureView, h as getActiveConfigurePageLink, M as MIN_SIDEBAR_WIDTH, i as MAX_SIDEBAR_WIDTH } from '../ConfigureView-DOotR_-0.js';
 import classnames from 'classnames';
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
 import Neeto from '@bigbinary/neeto-icons/typeface-logos/Neeto';
@@ -20,10 +20,10 @@ import { DropdownMenu, Badge, Tooltip, Button } from '@bigbinary/neeto-atoms';
 import { P as Plus } from '../plus-clM1IC_E.js';
 import { E as Ellipsis } from '../ellipsis-DpI9xqUK.js';
 import { C as ChevronRight } from '../chevron-right-DcaO-Hlu.js';
+import { n } from '../inject-css-C2dztUxs.js';
 import 'zustand/shallow';
 import '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import 'zustand';
-import '@bigbinary/neeto-commons-frontend/react-utils';
 import '@bigbinary/neeto-commons-frontend/utils/general';
 import '@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint';
 import '@bigbinary/neeto-filters-frontend/v2';
@@ -45,7 +45,7 @@ var Header = function Header(_ref) {
     "data-testid": "sidebar-info",
     children: /*#__PURE__*/jsx(Link, {
       to: DEFAULT_HOME_PATH,
-      className: classnames("block w-full", {
+      className: classnames("mt-2 block w-full py-2", {
         "cursor-pointer": isOnboarded,
         "pointer-events-none": !isOnboarded
       }),
@@ -382,6 +382,9 @@ var NavLinks = function NavLinks(_ref) {
   });
 };
 
+var css = "[data-slot=sidebar][data-mobile=true]:has(.nm-sidebar-shadcn-header){max-width:min(var(--sidebar-width),85vw)!important;width:var(--sidebar-width)!important}";
+n(css,{});
+
 var Sidebar = function Sidebar(_ref) {
   var navLinks = _ref.navLinks,
     _ref$moreNavLinks = _ref.moreNavLinks,
@@ -393,26 +396,65 @@ var Sidebar = function Sidebar(_ref) {
     showWorkspaceName = _ref$showWorkspaceNam === void 0 ? false : _ref$showWorkspaceNam,
     _ref$isExpandable = _ref.isExpandable,
     isExpandable = _ref$isExpandable === void 0 ? true : _ref$isExpandable;
+  var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    isSidebarCollapsed = _useLocalStorage2[0],
+    setIsSidebarCollapsed = _useLocalStorage2[1];
+  var _useLocalStorage3 = useLocalStorage(SIDEBAR_WIDTH_KEY, DEFAULT_SIDEBAR_WIDTH),
+    _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
+    sidebarWidthRaw = _useLocalStorage4[0],
+    setSidebarWidth = _useLocalStorage4[1];
+  var sidebarWidth = typeof sidebarWidthRaw === "string" ? parseInt(sidebarWidthRaw, 10) || DEFAULT_SIDEBAR_WIDTH : sidebarWidthRaw || DEFAULT_SIDEBAR_WIDTH;
+  return /*#__PURE__*/jsx(SidebarProvider, {
+    className: "!w-auto",
+    open: !isSidebarCollapsed,
+    style: {
+      "--sidebar-width": "".concat(sidebarWidth / 16, "rem")
+    },
+    onOpenChange: function onOpenChange(open) {
+      return setIsSidebarCollapsed(!open);
+    },
+    children: /*#__PURE__*/jsx(SidebarBody, {
+      customLogo: customLogo,
+      isCountsLoading: isCountsLoading,
+      isExpandable: isExpandable,
+      isSidebarCollapsed: isSidebarCollapsed,
+      moreNavLinks: moreNavLinks,
+      navLinks: navLinks,
+      setIsSidebarCollapsed: setIsSidebarCollapsed,
+      setSidebarWidth: setSidebarWidth,
+      showWorkspaceName: showWorkspaceName,
+      sidebarWidth: sidebarWidth
+    })
+  });
+};
+var SidebarBody = function SidebarBody(_ref2) {
+  var navLinks = _ref2.navLinks,
+    moreNavLinks = _ref2.moreNavLinks,
+    customLogo = _ref2.customLogo,
+    isCountsLoading = _ref2.isCountsLoading,
+    showWorkspaceName = _ref2.showWorkspaceName,
+    isExpandable = _ref2.isExpandable,
+    isSidebarCollapsed = _ref2.isSidebarCollapsed,
+    setIsSidebarCollapsed = _ref2.setIsSidebarCollapsed,
+    sidebarWidth = _ref2.sidebarWidth,
+    setSidebarWidth = _ref2.setSidebarWidth;
+  var _useSidebar = useSidebar(),
+    isMobile = _useSidebar.isMobile,
+    setOpenMobile = _useSidebar.setOpenMobile,
+    openMobile = _useSidebar.openMobile;
   var _useKeyboardShortcuts = useKeyboardShortcutsPaneState(),
     _useKeyboardShortcuts2 = _slicedToArray(_useKeyboardShortcuts, 1),
     isKeyboardShortcutsPaneOpen = _useKeyboardShortcuts2[0];
-  var _useLocalStorage = useLocalStorage(SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, null),
-    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
-    selectedNavLinkRoute = _useLocalStorage2[0],
-    setSelectedNavLinkRoute = _useLocalStorage2[1];
-  var _useLocalStorage3 = useLocalStorage(getSidebarStateLocalStorageKey(), false),
-    _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
-    isSidebarCollapsed = _useLocalStorage4[0],
-    setIsSidebarCollapsed = _useLocalStorage4[1];
-  var _useLocalStorage5 = useLocalStorage(SIDEBAR_WIDTH_KEY, DEFAULT_SIDEBAR_WIDTH),
+  var _useLocalStorage5 = useLocalStorage(SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, null),
     _useLocalStorage6 = _slicedToArray(_useLocalStorage5, 2),
-    sidebarWidthRaw = _useLocalStorage6[0],
-    setSidebarWidth = _useLocalStorage6[1];
-  var sidebarWidth = typeof sidebarWidthRaw === "string" ? parseInt(sidebarWidthRaw, 10) || DEFAULT_SIDEBAR_WIDTH : sidebarWidthRaw || DEFAULT_SIDEBAR_WIDTH;
+    selectedNavLinkRoute = _useLocalStorage6[0],
+    setSelectedNavLinkRoute = _useLocalStorage6[1];
   var isDraggingRef = useRef(false);
   var hasDraggedRef = useRef(false);
   var startXRef = useRef(null);
   var startWidthRef = useRef(null);
+  var isInitialMountRef = useRef(true);
   var location = useLocation();
   var history = useHistory();
   var _useTranslation = useTranslation(),
@@ -420,18 +462,22 @@ var Sidebar = function Sidebar(_ref) {
   var isRTL = document.documentElement.dir === "rtl";
   var sidebarSide = isRTL ? "right" : "left";
   useEffect(function () {
-    if (isKeyboardShortcutsPaneOpen) {
-      setIsSidebarCollapsed(true);
-    } else if (window.innerWidth > 768) {
-      setIsSidebarCollapsed(false);
+    if (isInitialMountRef.current) {
+      isInitialMountRef.current = false;
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- setIsSidebarCollapsed may not be stable across renders
-  }, [isKeyboardShortcutsPaneOpen]);
+    if (isMobile) {
+      if (isKeyboardShortcutsPaneOpen) setOpenMobile(false);
+      return;
+    }
+    if (isKeyboardShortcutsPaneOpen) setIsSidebarCollapsed(true);else setIsSidebarCollapsed(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setIsSidebarCollapsed / setOpenMobile may not be stable across renders
+  }, [isKeyboardShortcutsPaneOpen, isMobile]);
   useEffect(function () {
     if (!isPresent(navLinks)) return;
-    var currentLink = findLast(function (_ref2) {
-      var to = _ref2.to,
-        isActive = _ref2.isActive;
+    var currentLink = findLast(function (_ref3) {
+      var to = _ref3.to,
+        isActive = _ref3.isActive;
       var url = new URL(to, window.location.href);
       return is(Function, isActive) ? isActive() : location.pathname.includes(url.pathname);
     })(navLinks);
@@ -440,12 +486,8 @@ var Sidebar = function Sidebar(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only: sets initial selected route from current URL
   }, []);
-
-  // Drag-to-resize via SidebarRail: intercept mousedown to start drag,
-  // update --sidebar-width directly on DOM for instant feedback,
-  // persist to localStorage on mouseup.
   var handleRailMouseDown = useCallback(function (e) {
-    if (!isExpandable) return;
+    if (!isExpandable || isMobile) return;
     isDraggingRef.current = true;
     hasDraggedRef.current = false;
     startXRef.current = e.clientX;
@@ -455,9 +497,7 @@ var Sidebar = function Sidebar(_ref) {
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
     e.preventDefault();
-  }, [sidebarWidth, isExpandable]);
-
-  // Prevent SidebarRail's built-in toggle when user dragged to resize
+  }, [sidebarWidth, isExpandable, isMobile]);
   var handleRailClick = useCallback(function (e) {
     if (!hasDraggedRef.current) return;
     e.preventDefault();
@@ -465,12 +505,11 @@ var Sidebar = function Sidebar(_ref) {
     hasDraggedRef.current = false;
   }, []);
   useEffect(function () {
-    if (!isExpandable) return undefined;
+    if (!isExpandable || isMobile) return undefined;
     var onMouseMove = function onMouseMove(e) {
       if (!isDraggingRef.current) return;
       hasDraggedRef.current = true;
       var dx = e.clientX - startXRef.current;
-      // In RTL, dragging right shrinks, dragging left expands
       var rtl = document.documentElement.dir === "rtl";
       var newWidth = startWidthRef.current + (rtl ? -dx : dx);
       newWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(newWidth, MAX_SIDEBAR_WIDTH));
@@ -498,10 +537,10 @@ var Sidebar = function Sidebar(_ref) {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
     };
-  }, [isExpandable, setSidebarWidth]);
+  }, [isExpandable, isMobile, setSidebarWidth]);
   useEffect(function () {
-    document.documentElement.style.setProperty("--nv-sidebar-width", "".concat(sidebarWidth / 16, "rem"));
-  }, [sidebarWidth]);
+    document.documentElement.style.setProperty("--nv-sidebar-width", isMobile ? "0rem" : "".concat(sidebarWidth / 16, "rem"));
+  }, [sidebarWidth, isMobile]);
   var handleGoBack = function handleGoBack(event) {
     event.preventDefault();
     setSelectedNavLinkRoute(null);
@@ -521,27 +560,20 @@ var Sidebar = function Sidebar(_ref) {
     });
   }, [location.pathname, navLinks]);
   var isSelectedNavLinkVisible = selectedNavLinkRoute && (activeLink === null || activeLink === void 0 ? void 0 : activeLink.to) === selectedNavLinkRoute && isNotEmpty(navLinks);
-  return /*#__PURE__*/jsxs(SidebarProvider, {
-    className: "!w-auto",
-    open: !isSidebarCollapsed,
-    style: {
-      "--sidebar-width": "".concat(sidebarWidth / 16, "rem")
-    },
-    onOpenChange: function onOpenChange(open) {
-      return setIsSidebarCollapsed(!open);
-    },
+  return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsxs(Sidebar$1, {
       collapsible: "offcanvas",
       side: sidebarSide,
       children: [/*#__PURE__*/jsxs(SidebarHeader, {
-        className: "relative p-0",
+        className: "nm-sidebar-shadcn-header relative p-0",
         children: [/*#__PURE__*/jsx(Header$1, {
           customLogo: customLogo,
           clearSettingsNav: function clearSettingsNav() {
             return setSelectedNavLinkRoute(null);
           }
         }), /*#__PURE__*/jsx(SidebarTrigger, {
-          className: "absolute end-2 top-3"
+          className: "absolute end-2 top-3",
+          title: t("neetoMolecules.sidebar.hideMenu")
         }), showWorkspaceName && /*#__PURE__*/jsxs("div", {
           className: "border-sidebar-border border-b px-4 py-2",
           children: [/*#__PURE__*/jsx("h5", {
@@ -562,12 +594,13 @@ var Sidebar = function Sidebar(_ref) {
           navLinks: navLinks,
           setSelectedNavLinkRoute: setSelectedNavLinkRoute
         })
-      }), isExpandable && /*#__PURE__*/jsx(SidebarRail, {
+      }), !isMobile && isExpandable && !isSidebarCollapsed && /*#__PURE__*/jsx(SidebarRail, {
         onClickCapture: handleRailClick,
         onMouseDown: handleRailMouseDown
       })]
-    }), isSidebarCollapsed && /*#__PURE__*/jsx(SidebarTrigger, {
-      className: "fixed start-2 top-3 z-50"
+    }), (isMobile && !openMobile || !isMobile && isSidebarCollapsed) && /*#__PURE__*/jsx(SidebarTrigger, {
+      className: "bg-background hover:bg-accent fixed start-2 top-2 z-50 size-9 rounded-full border shadow-sm",
+      title: t("neetoMolecules.sidebar.showMenu")
     })]
   });
 };