@bigbinary/neeto-atoms 1.0.133-beta1 → 1.0.133-beta2

package/dist/cjs/MultiEmailInput-N9amBO6Q.js

@@ -0,0 +1,347 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var utils = require('./utils-BhM0B89p.js');
+var primitives_Field = require('./primitives/Field.js');
+var fieldIds = require('./fieldIds-DiVU6GVS.js');
+var hyphenize = require('./hyphenize-BTrVNVv3.js');
+var withIconSize = require('./withIconSize-C6LP0R7o.js');
+var x = require('./x-Brw3FJst.js');
+
+const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9-]+(?:\.[A-Z0-9-]+)*\.[A-Z]{2,}$/i;
+const UNSTRICT_EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/g;
+const DOMAIN_REGEX = /^(?:[a-zA-Z0-9-]{1,63}\.)+[a-zA-Z0-9-]{2,63}$/;
+const SEPARATION_REGEX = /[^\s,]+/g;
+const VALIDATION_REGEX = {
+  email: EMAIL_REGEX,
+  domain: DOMAIN_REGEX
+};
+const ENTITY_FALLBACK = {
+  email: { one: "email", other: "emails" },
+  domain: { one: "domain", other: "domains" }
+};
+
+const formatEmailInputOption = (email, entryType = "email") => ({
+  label: email,
+  value: email,
+  valid: VALIDATION_REGEX[entryType].test(email)
+});
+const pruneDuplicates = (existing, newEmailStrings, entryType = "email") => {
+  const seen = new Set(existing.map((e) => e.value.toLowerCase()));
+  const duplicates = [];
+  const added = [];
+  for (const emailStr of newEmailStrings) {
+    const lower = emailStr.toLowerCase();
+    if (seen.has(lower)) {
+      duplicates.push(emailStr);
+    } else {
+      seen.add(lower);
+      added.push(formatEmailInputOption(lower, entryType));
+    }
+  }
+  return { uniqueEmails: [...existing, ...added], duplicates };
+};
+const filterValidEmails = (emails) => emails.filter((email) => email.valid);
+const getEntityLabel = (t, entryType, count) => t(
+  `neetoatoms.multiEmailInput.${entryType}`,
+  ENTITY_FALLBACK[entryType][count === 1 ? "one" : "other"],
+  { count }
+);
+
+function useMultiEmailState(props) {
+  const {
+    entryType = "email",
+    value = [],
+    onChange,
+    onBlur,
+    visibleEmailsCount = 3,
+    isAlwaysExpanded = false,
+    counter,
+    filterInvalidEmails
+  } = props;
+  const [inputValue, setInputValue] = React.useState("");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [duplicateEmails, setDuplicateEmails] = React.useState([]);
+  const addEmails = React.useCallback(
+    (input) => {
+      const trimmed = input.trim();
+      if (!trimmed) return;
+      const separated = trimmed.match(SEPARATION_REGEX) || [];
+      const matches = entryType === "email" ? trimmed.match(UNSTRICT_EMAIL_REGEX) || separated : separated;
+      if (matches.length === 0) return;
+      const { uniqueEmails, duplicates } = pruneDuplicates(
+        value,
+        matches,
+        entryType
+      );
+      onChange?.(uniqueEmails);
+      setDuplicateEmails(duplicates);
+      setInputValue("");
+    },
+    [value, onChange, entryType]
+  );
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!inputValue && event.key === "Backspace" && value.length > 0) {
+        onChange?.(value.slice(0, -1));
+        return;
+      }
+      if (!inputValue) return;
+      if (["Enter", "Tab", ",", " "].includes(event.key)) {
+        addEmails(inputValue);
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [inputValue, value, onChange, addEmails]
+  );
+  const handlePaste = React.useCallback(
+    (event) => {
+      const text = event.clipboardData.getData("text");
+      if (!text) return;
+      event.preventDefault();
+      addEmails(text);
+    },
+    [addEmails]
+  );
+  const handleBlur = React.useCallback(() => {
+    if (inputValue) {
+      addEmails(inputValue);
+    } else {
+      onBlur?.();
+    }
+    setIsFocused(false);
+    setDuplicateEmails([]);
+  }, [inputValue, addEmails, onBlur]);
+  const handleFocus = React.useCallback(() => setIsFocused(true), []);
+  const handleChipRemove = React.useCallback(
+    (emailValue) => onChange?.(value.filter((e) => e.value !== emailValue)),
+    [value, onChange]
+  );
+  const handleFilterInvalidEmails = React.useCallback(
+    () => onChange?.(filterValidEmails(value)),
+    [value, onChange]
+  );
+  const validCount = React.useMemo(() => value.filter((e) => e.valid).length, [value]);
+  const isCounterVisible = !!counter && (typeof counter === "boolean" || !counter.startsFrom || validCount >= counter.startsFrom);
+  const shouldCollapse = !isAlwaysExpanded && !isFocused && value.length > visibleEmailsCount;
+  const visibleEmails = shouldCollapse ? value.slice(0, visibleEmailsCount) : value;
+  const hiddenCount = shouldCollapse ? value.length - visibleEmailsCount : 0;
+  const isFilterLinkVisible = !!filterInvalidEmails && value.length > validCount;
+  return {
+    inputValue,
+    setInputValue,
+    isFocused,
+    duplicateEmails,
+    handleKeyDown,
+    handlePaste,
+    handleBlur,
+    handleFocus,
+    handleChipRemove,
+    handleFilterInvalidEmails,
+    isCounterVisible,
+    validCount,
+    visibleEmails,
+    hiddenCount,
+    isFilterLinkVisible
+  };
+}
+
+const CHIP_BASE = "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground";
+const CHIP_INVALID = "border border-destructive text-destructive bg-destructive/10";
+const CHIPS_CONTAINER = "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-base md:text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50";
+const CHIPS_ERROR = "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40";
+const MultiEmailInput = React.forwardRef((props, ref) => {
+  const {
+    entryType = "email",
+    label,
+    placeholder = "",
+    helpText,
+    error,
+    disabled = false,
+    required = false,
+    maxHeight = 200,
+    counter,
+    filterInvalidEmails,
+    prefix,
+    suffix,
+    labelProps,
+    className,
+    dataTestId
+  } = props;
+  const id = React.useId();
+  const { t } = reactI18next.useTranslation();
+  const testIdPrefix = fieldIds.buildTestIdPrefix(dataTestId, label);
+  const {
+    isCounterVisible,
+    validCount,
+    visibleEmails,
+    hiddenCount,
+    inputValue,
+    setInputValue,
+    handleKeyDown,
+    handlePaste,
+    handleFocus,
+    handleBlur,
+    handleChipRemove,
+    isFilterLinkVisible,
+    handleFilterInvalidEmails,
+    duplicateEmails
+  } = useMultiEmailState(props);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    primitives_Field.Field,
+    {
+      className: utils.cn("flex flex-col gap-1.5", className),
+      "data-testid": "email-input-wrapper",
+      children: [
+        (label || isCounterVisible) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            primitives_Field.FieldLabel,
+            {
+              htmlFor: id,
+              "data-testid": `${testIdPrefix}-input-label`,
+              ...labelProps,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-destructive", children: " *" })
+              ]
+            }
+          ),
+          isCounterVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "text-xs text-muted-foreground",
+              "data-testid": `${testIdPrefix}-email-counter`,
+              children: [
+                validCount,
+                " ",
+                typeof counter === "object" && counter?.label ? counter.label : getEntityLabel(t, entryType, validCount)
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-testid": "multi-email-select-container",
+            className: utils.cn(
+              CHIPS_CONTAINER,
+              !!error && CHIPS_ERROR,
+              disabled && "pointer-events-none opacity-50"
+            ),
+            style: { maxHeight: `${maxHeight}px`, overflowY: "auto" },
+            children: [
+              prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-muted-foreground", children: withIconSize.withIconSize(prefix, "size-4") }),
+              visibleEmails.map((email) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: utils.cn(CHIP_BASE, !email.valid && CHIP_INVALID),
+                  children: [
+                    email.label,
+                    !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        "data-testid": `${hyphenize.hyphenize(email.label)}-remove-icon`,
+                        className: "-ms-0.5 rounded-xs opacity-50 hover:opacity-100",
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: () => handleChipRemove(email.value),
+                        "aria-label": t(
+                          "neetoatoms.multiEmailInput.remove",
+                          "Remove {{label}}",
+                          {
+                            label: email.label
+                          }
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(x.X, { className: "size-3 pointer-events-none" })
+                      }
+                    )
+                  ]
+                },
+                email.value
+              )),
+              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-[calc(--spacing(5.25))] items-center rounded-sm bg-secondary px-1.5 text-xs font-medium text-secondary-foreground", children: t("neetoatoms.multiEmailInput.hiddenCount", "+{{total}} more", {
+                total: hiddenCount
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref,
+                  id,
+                  type: "text",
+                  "data-testid": "email-select-input-field",
+                  value: inputValue,
+                  onChange: (e) => setInputValue(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  onPaste: handlePaste,
+                  onFocus: handleFocus,
+                  onBlur: handleBlur,
+                  placeholder: props.value?.length ? "" : placeholder,
+                  disabled,
+                  className: "min-w-16 flex-1 bg-transparent text-base outline-none placeholder:text-placeholder md:text-sm"
+                }
+              ),
+              suffix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-muted-foreground", children: withIconSize.withIconSize(suffix, "size-4") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.FieldContent, { children: [
+          !!error && /* @__PURE__ */ jsxRuntime.jsxs(
+            "p",
+            {
+              className: "text-[0.8rem] text-destructive",
+              "data-testid": `${testIdPrefix}-input-error`,
+              children: [
+                error,
+                isFilterLinkVisible && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ml-1 cursor-pointer font-semibold underline",
+                    onClick: handleFilterInvalidEmails,
+                    children: filterInvalidEmails?.label ?? t(
+                      "neetoatoms.multiEmailInput.removeInvalid",
+                      "Click here to remove invalid {{entity}}.",
+                      { entity: getEntityLabel(t, entryType, 0) }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          !!helpText && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-[0.8rem] text-muted-foreground",
+              "data-testid": `${testIdPrefix}-input-help`,
+              children: helpText
+            }
+          ),
+          duplicateEmails.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: "text-[0.8rem] text-amber-600 dark:text-amber-400",
+              "data-testid": `${testIdPrefix}-duplicate-emails-warning`,
+              children: t(
+                "neetoatoms.multiEmailInput.duplicateWarning",
+                "Removed {{total}} duplicate {{entity}} from the list: {{items}}",
+                {
+                  total: duplicateEmails.length,
+                  entity: getEntityLabel(t, entryType, duplicateEmails.length),
+                  items: duplicateEmails.join(", ")
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+MultiEmailInput.displayName = "MultiEmailInput";
+
+exports.MultiEmailInput = MultiEmailInput;
+//# sourceMappingURL=MultiEmailInput-N9amBO6Q.js.map

package/dist/cjs/MultiEmailInput-N9amBO6Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiEmailInput-N9amBO6Q.js","sources":["../../src/components/MultiEmailInput/constants.ts","../../src/components/MultiEmailInput/utils.ts","../../src/components/MultiEmailInput/useMultiEmailState.ts","../../src/components/MultiEmailInput/MultiEmailInput.tsx"],"sourcesContent":["export const EMAIL_REGEX =\n  /^[A-Z0-9._%+-]+@[A-Z0-9-]+(?:\\.[A-Z0-9-]+)*\\.[A-Z]{2,}$/i;\n\nexport const UNSTRICT_EMAIL_REGEX =\n  /(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))/g;\n\nexport const DOMAIN_REGEX = /^(?:[a-zA-Z0-9-]{1,63}\\.)+[a-zA-Z0-9-]{2,63}$/;\n\nexport const SEPARATION_REGEX = /[^\\s,]+/g;\n\nexport const VALIDATION_REGEX = {\n  email: EMAIL_REGEX,\n  domain: DOMAIN_REGEX,\n} as const;\n\nexport const ENTITY_FALLBACK = {\n  email: { one: \"email\", other: \"emails\" },\n  domain: { one: \"domain\", other: \"domains\" },\n} as const;\n","import type { TFunction } from \"i18next\";\n\nimport { ENTITY_FALLBACK, VALIDATION_REGEX } from \"./constants\";\nimport type { EmailValue, EntryType } from \"./types\";\n\nexport const formatEmailInputOption = (\n  email: string,\n  entryType: EntryType = \"email\"\n): EmailValue => ({\n  label: email,\n  value: email,\n  valid: VALIDATION_REGEX[entryType].test(email),\n});\n\nexport const pruneDuplicates = (\n  existing: EmailValue[],\n  newEmailStrings: string[],\n  entryType: EntryType = \"email\"\n): { uniqueEmails: EmailValue[]; duplicates: string[] } => {\n  const seen = new Set(existing.map(e => e.value.toLowerCase()));\n  const duplicates: string[] = [];\n  const added: EmailValue[] = [];\n\n  for (const emailStr of newEmailStrings) {\n    const lower = emailStr.toLowerCase();\n    if (seen.has(lower)) {\n      duplicates.push(emailStr);\n    } else {\n      seen.add(lower);\n      added.push(formatEmailInputOption(lower, entryType));\n    }\n  }\n\n  return { uniqueEmails: [...existing, ...added], duplicates };\n};\n\nexport const filterValidEmails = (emails: EmailValue[]): EmailValue[] =>\n  emails.filter(email => email.valid);\n\nexport const getEntityLabel = (\n  t: TFunction,\n  entryType: EntryType,\n  count: number\n): string =>\n  t(\n    `neetoatoms.multiEmailInput.${entryType}`,\n    ENTITY_FALLBACK[entryType][count === 1 ? \"one\" : \"other\"],\n    { count }\n  );\n","import { useState, useCallback, useMemo } from \"react\";\n\nimport { UNSTRICT_EMAIL_REGEX, SEPARATION_REGEX } from \"./constants\";\nimport { pruneDuplicates, filterValidEmails } from \"./utils\";\nimport type { MultiEmailInputProps } from \"./types\";\n\nexport function useMultiEmailState(props: MultiEmailInputProps) {\n  const {\n    entryType = \"email\",\n    value = [],\n    onChange,\n    onBlur,\n    visibleEmailsCount = 3,\n    isAlwaysExpanded = false,\n    counter,\n    filterInvalidEmails,\n  } = props;\n\n  const [inputValue, setInputValue] = useState(\"\");\n  const [isFocused, setIsFocused] = useState(false);\n  const [duplicateEmails, setDuplicateEmails] = useState<string[]>([]);\n\n  const addEmails = useCallback(\n    (input: string) => {\n      const trimmed = input.trim();\n      if (!trimmed) return;\n      const separated = trimmed.match(SEPARATION_REGEX) || [];\n      const matches =\n        entryType === \"email\"\n          ? trimmed.match(UNSTRICT_EMAIL_REGEX) || separated\n          : separated;\n      if (matches.length === 0) return;\n      const { uniqueEmails, duplicates } = pruneDuplicates(\n        value,\n        matches,\n        entryType\n      );\n      onChange?.(uniqueEmails);\n      setDuplicateEmails(duplicates);\n      setInputValue(\"\");\n    },\n    [value, onChange, entryType]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!inputValue && event.key === \"Backspace\" && value.length > 0) {\n        onChange?.(value.slice(0, -1));\n        return;\n      }\n      if (!inputValue) return;\n      if ([\"Enter\", \"Tab\", \",\", \" \"].includes(event.key)) {\n        addEmails(inputValue);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [inputValue, value, onChange, addEmails]\n  );\n\n  const handlePaste = useCallback(\n    (event: React.ClipboardEvent<HTMLInputElement>) => {\n      const text = event.clipboardData.getData(\"text\");\n      if (!text) return;\n      event.preventDefault();\n      addEmails(text);\n    },\n    [addEmails]\n  );\n\n  const handleBlur = useCallback(() => {\n    if (inputValue) {\n      addEmails(inputValue);\n    } else {\n      onBlur?.();\n    }\n    setIsFocused(false);\n    setDuplicateEmails([]);\n  }, [inputValue, addEmails, onBlur]);\n\n  const handleFocus = useCallback(() => setIsFocused(true), []);\n\n  const handleChipRemove = useCallback(\n    (emailValue: string) =>\n      onChange?.(value.filter(e => e.value !== emailValue)),\n    [value, onChange]\n  );\n\n  const handleFilterInvalidEmails = useCallback(\n    () => onChange?.(filterValidEmails(value)),\n    [value, onChange]\n  );\n\n  const validCount = useMemo(() => value.filter(e => e.valid).length, [value]);\n  const isCounterVisible =\n    !!counter &&\n    (typeof counter === \"boolean\" ||\n      !counter.startsFrom ||\n      validCount >= counter.startsFrom);\n  const shouldCollapse =\n    !isAlwaysExpanded && !isFocused && value.length > visibleEmailsCount;\n  const visibleEmails = shouldCollapse\n    ? value.slice(0, visibleEmailsCount)\n    : value;\n  const hiddenCount = shouldCollapse ? value.length - visibleEmailsCount : 0;\n  const isFilterLinkVisible =\n    !!filterInvalidEmails && value.length > validCount;\n\n  return {\n    inputValue,\n    setInputValue,\n    isFocused,\n    duplicateEmails,\n    handleKeyDown,\n    handlePaste,\n    handleBlur,\n    handleFocus,\n    handleChipRemove,\n    handleFilterInvalidEmails,\n    isCounterVisible,\n    validCount,\n    visibleEmails,\n    hiddenCount,\n    isFilterLinkVisible,\n  };\n}\n","import { forwardRef, useId } from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { cn } from \"src/shadcn/lib/utils\";\nimport { Field, FieldLabel, FieldContent } from \"src/primitives/Field\";\nimport { buildTestIdPrefix } from \"src/utils/fieldIds\";\nimport { hyphenize } from \"src/utils/hyphenize\";\nimport { withIconSize } from \"src/utils/withIconSize\";\nimport { useMultiEmailState } from \"./useMultiEmailState\";\nimport { getEntityLabel } from \"./utils\";\nimport type { MultiEmailInputProps } from \"./types\";\n\nconst CHIP_BASE =\n  \"flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground\";\nconst CHIP_INVALID =\n  \"border border-destructive text-destructive bg-destructive/10\";\nconst CHIPS_CONTAINER =\n  \"flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-base md:text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50\";\nconst CHIPS_ERROR =\n  \"border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40\";\n\nexport const MultiEmailInput = forwardRef<\n  HTMLInputElement,\n  MultiEmailInputProps\n>((props, ref) => {\n  const {\n    entryType = \"email\",\n    label,\n    placeholder = \"\",\n    helpText,\n    error,\n    disabled = false,\n    required = false,\n    maxHeight = 200,\n    counter,\n    filterInvalidEmails,\n    prefix,\n    suffix,\n    labelProps,\n    className,\n    dataTestId,\n  } = props;\n  const id = useId();\n  const { t } = useTranslation();\n  const testIdPrefix = buildTestIdPrefix(dataTestId, label);\n  const {\n    isCounterVisible,\n    validCount,\n    visibleEmails,\n    hiddenCount,\n    inputValue,\n    setInputValue,\n    handleKeyDown,\n    handlePaste,\n    handleFocus,\n    handleBlur,\n    handleChipRemove,\n    isFilterLinkVisible,\n    handleFilterInvalidEmails,\n    duplicateEmails,\n  } = useMultiEmailState(props);\n\n  return (\n    <Field\n      className={cn(\"flex flex-col gap-1.5\", className)}\n      data-testid=\"email-input-wrapper\"\n    >\n      {(label || isCounterVisible) && (\n        <div className=\"flex items-center justify-between\">\n          {label && (\n            <FieldLabel\n              htmlFor={id}\n              data-testid={`${testIdPrefix}-input-label`}\n              {...labelProps}\n            >\n              {label}\n              {required && (\n                <span aria-hidden=\"true\" className=\"text-destructive\">\n                  {\" *\"}\n                </span>\n              )}\n            </FieldLabel>\n          )}\n          {isCounterVisible && (\n            <span\n              className=\"text-xs text-muted-foreground\"\n              data-testid={`${testIdPrefix}-email-counter`}\n            >\n              {validCount}{\" \"}\n              {typeof counter === \"object\" && counter?.label\n                ? counter.label\n                : getEntityLabel(t, entryType, validCount)}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        data-testid=\"multi-email-select-container\"\n        className={cn(\n          CHIPS_CONTAINER,\n          !!error && CHIPS_ERROR,\n          disabled && \"pointer-events-none opacity-50\"\n        )}\n        style={{ maxHeight: `${maxHeight}px`, overflowY: \"auto\" }}\n      >\n        {prefix && (\n          <div className=\"shrink-0 text-muted-foreground\">\n            {withIconSize(prefix, \"size-4\")}\n          </div>\n        )}\n        {visibleEmails.map(email => (\n          <span\n            key={email.value}\n            className={cn(CHIP_BASE, !email.valid && CHIP_INVALID)}\n          >\n            {email.label}\n            {!disabled && (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                data-testid={`${hyphenize(email.label)}-remove-icon`}\n                className=\"-ms-0.5 rounded-xs opacity-50 hover:opacity-100\"\n                onMouseDown={e => e.preventDefault()}\n                onClick={() => handleChipRemove(email.value)}\n                aria-label={t(\n                  \"neetoatoms.multiEmailInput.remove\",\n                  \"Remove {{label}}\",\n                  {\n                    label: email.label,\n                  }\n                )}\n              >\n                <XIcon className=\"size-3 pointer-events-none\" />\n              </button>\n            )}\n          </span>\n        ))}\n        {hiddenCount > 0 && (\n          <span className=\"flex h-[calc(--spacing(5.25))] items-center rounded-sm bg-secondary px-1.5 text-xs font-medium text-secondary-foreground\">\n            {t(\"neetoatoms.multiEmailInput.hiddenCount\", \"+{{total}} more\", {\n              total: hiddenCount,\n            })}\n          </span>\n        )}\n        <input\n          ref={ref}\n          id={id}\n          type=\"text\"\n          data-testid=\"email-select-input-field\"\n          value={inputValue}\n          onChange={e => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={props.value?.length ? \"\" : placeholder}\n          disabled={disabled}\n          className=\"min-w-16 flex-1 bg-transparent text-base outline-none placeholder:text-placeholder md:text-sm\"\n        />\n        {suffix && (\n          <div className=\"shrink-0 text-muted-foreground\">\n            {withIconSize(suffix, \"size-4\")}\n          </div>\n        )}\n      </div>\n      <FieldContent>\n        {!!error && (\n          <p\n            className=\"text-[0.8rem] text-destructive\"\n            data-testid={`${testIdPrefix}-input-error`}\n          >\n            {error}\n            {isFilterLinkVisible && (\n              <button\n                type=\"button\"\n                className=\"ml-1 cursor-pointer font-semibold underline\"\n                onClick={handleFilterInvalidEmails}\n              >\n                {filterInvalidEmails?.label ??\n                  t(\n                    \"neetoatoms.multiEmailInput.removeInvalid\",\n                    \"Click here to remove invalid {{entity}}.\",\n                    { entity: getEntityLabel(t, entryType, 0) }\n                  )}\n              </button>\n            )}\n          </p>\n        )}\n        {!!helpText && (\n          <p\n            className=\"text-[0.8rem] text-muted-foreground\"\n            data-testid={`${testIdPrefix}-input-help`}\n          >\n            {helpText}\n          </p>\n        )}\n        {duplicateEmails.length > 0 && (\n          <p\n            className=\"text-[0.8rem] text-amber-600 dark:text-amber-400\"\n            data-testid={`${testIdPrefix}-duplicate-emails-warning`}\n          >\n            {t(\n              \"neetoatoms.multiEmailInput.duplicateWarning\",\n              \"Removed {{total}} duplicate {{entity}} from the list: {{items}}\",\n              {\n                total: duplicateEmails.length,\n                entity: getEntityLabel(t, entryType, duplicateEmails.length),\n                items: duplicateEmails.join(\", \"),\n              }\n            )}\n          </p>\n        )}\n      </FieldContent>\n    </Field>\n  );\n});\nMultiEmailInput.displayName = \"MultiEmailInput\";\n"],"names":["useState","useCallback","useMemo","forwardRef","useId","useTranslation","buildTestIdPrefix","jsxs","Field","cn","FieldLabel","jsx","withIconSize","hyphenize","XIcon","FieldContent"],"mappings":"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"}

package/dist/cjs/Pagination-WyQlBpvK.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils-BhM0B89p.js');
+var primitives_Pagination = require('./primitives/Pagination.js');
+var reactRouterDom = require('react-router-dom');
+
+const DOTS = "...";
+
+const PAGE_PARAM = "page";
+const usePaginationQueryParams = () => {
+  const history = reactRouterDom.useHistory();
+  const updatePageInQueryParam = (page) => {
+    const params = new URLSearchParams(window.location.search);
+    params.set(PAGE_PARAM, String(page));
+    history.push(`${window.location.pathname}?${params.toString()}`);
+  };
+  return { updatePageInQueryParam };
+};
+
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+}
+
+function usePaginationRange({
+  count,
+  pageSize,
+  siblingCount = 1,
+  pageNo
+}) {
+  return React.useMemo(() => {
+    const totalPageCount = Math.ceil(count / pageSize);
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+    const leftSiblingIndex = Math.max(pageNo - siblingCount, 1);
+    const rightSiblingIndex = Math.min(pageNo + siblingCount, totalPageCount);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftRange = range(1, 3 + 2 * siblingCount);
+      return [...leftRange, DOTS, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightRange = range(
+        totalPageCount - (3 + 2 * siblingCount) + 1,
+        totalPageCount
+      );
+      return [1, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [1, DOTS, ...middleRange, DOTS, totalPageCount];
+    }
+    return range(1, totalPageCount);
+  }, [count, pageSize, siblingCount, pageNo]);
+}
+
+const Pagination = React.forwardRef(
+  ({
+    count,
+    pageNo,
+    pageSize,
+    siblingCount = 1,
+    navigate,
+    className,
+    ...otherProps
+  }, ref) => {
+    const paginationRange = usePaginationRange({
+      count,
+      pageSize,
+      siblingCount,
+      pageNo
+    });
+    const { updatePageInQueryParam } = usePaginationQueryParams();
+    const lastPage = paginationRange[paginationRange.length - 1];
+    const isFirstPage = pageNo === 1;
+    const isLastPage = pageNo === lastPage;
+    if (pageNo === 0 || paginationRange.length < 2) {
+      return null;
+    }
+    const handleNavigate = navigate ?? updatePageInQueryParam;
+    return /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.Pagination, { ref, className: utils.cn(className), ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(primitives_Pagination.PaginationContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Pagination.PaginationPrevious,
+        {
+          onClick: () => !isFirstPage && handleNavigate(pageNo - 1),
+          "aria-disabled": isFirstPage,
+          className: utils.cn(isFirstPage && "pointer-events-none opacity-50"),
+          "data-testid": "left-navigate-button"
+        }
+      ) }),
+      paginationRange.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: page === DOTS ? /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationEllipsis, { "data-testid": "dots" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Pagination.PaginationLink,
+        {
+          isActive: page === pageNo,
+          onClick: () => handleNavigate(page),
+          children: page
+        }
+      ) }, `${page}-${index}`)),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives_Pagination.PaginationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Pagination.PaginationNext,
+        {
+          onClick: () => !isLastPage && handleNavigate(pageNo + 1),
+          "aria-disabled": isLastPage,
+          className: utils.cn(isLastPage && "pointer-events-none opacity-50"),
+          "data-testid": "right-navigate-button"
+        }
+      ) })
+    ] }) });
+  }
+);
+Pagination.displayName = "Pagination";
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination-WyQlBpvK.js.map

package/dist/cjs/Pagination-WyQlBpvK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination-WyQlBpvK.js","sources":["../../src/components/Pagination/constants.ts","../../src/components/Pagination/hooks/usePaginationQueryParams.ts","../../src/components/Pagination/utils.ts","../../src/components/Pagination/hooks/usePaginationRange.ts","../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["export const DOTS = \"...\" as const;\n","import { useHistory } from \"react-router-dom\";\n\nconst PAGE_PARAM = \"page\";\n\n/**\n * Returns a navigate callback that updates the `?page=` query param while\n * preserving every other search param. Used as the default `navigate`\n * for Pagination when the consumer doesn't pass one explicitly.\n *\n * Mirrors v1 neeto-ui Pagination's auto URL sync behavior. Must be\n * rendered inside a react-router-dom v5 history context.\n */\nexport const usePaginationQueryParams = () => {\n  const history = useHistory();\n\n  const updatePageInQueryParam = (page: number) => {\n    const params = new URLSearchParams(window.location.search);\n    params.set(PAGE_PARAM, String(page));\n    history.push(`${window.location.pathname}?${params.toString()}`);\n  };\n\n  return { updatePageInQueryParam };\n};\n","export function range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => i + start);\n}\n","import { useMemo } from \"react\";\n\nimport { DOTS } from \"../constants\";\nimport { range } from \"../utils\";\n\nexport function usePaginationRange({\n  count,\n  pageSize,\n  siblingCount = 1,\n  pageNo,\n}: {\n  count: number;\n  pageSize: number;\n  siblingCount: number;\n  pageNo: number;\n}): (number | typeof DOTS)[] {\n  return useMemo(() => {\n    const totalPageCount = Math.ceil(count / pageSize);\n    const totalPageNumbers = siblingCount + 5;\n\n    if (totalPageNumbers >= totalPageCount) {\n      return range(1, totalPageCount);\n    }\n\n    const leftSiblingIndex = Math.max(pageNo - siblingCount, 1);\n    const rightSiblingIndex = Math.min(pageNo + siblingCount, totalPageCount);\n\n    const shouldShowLeftDots = leftSiblingIndex > 2;\n    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;\n\n    if (!shouldShowLeftDots && shouldShowRightDots) {\n      const leftRange = range(1, 3 + 2 * siblingCount);\n      return [...leftRange, DOTS, totalPageCount];\n    }\n\n    if (shouldShowLeftDots && !shouldShowRightDots) {\n      const rightRange = range(\n        totalPageCount - (3 + 2 * siblingCount) + 1,\n        totalPageCount\n      );\n      return [1, DOTS, ...rightRange];\n    }\n\n    if (shouldShowLeftDots && shouldShowRightDots) {\n      const middleRange = range(leftSiblingIndex, rightSiblingIndex);\n      return [1, DOTS, ...middleRange, DOTS, totalPageCount];\n    }\n\n    return range(1, totalPageCount);\n  }, [count, pageSize, siblingCount, pageNo]);\n}\n","import React, { forwardRef } from \"react\";\n\nimport { cn } from \"src/shadcn/lib/utils\";\nimport {\n  Pagination as PrimitivePagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"src/primitives/Pagination\";\n\nimport { DOTS } from \"./constants\";\nimport { usePaginationQueryParams } from \"./hooks/usePaginationQueryParams\";\nimport { usePaginationRange } from \"./hooks/usePaginationRange\";\n\nexport interface PaginationProps extends Omit<\n  React.ComponentProps<typeof PrimitivePagination>,\n  \"children\"\n> {\n  /** Total number of items. */\n  count: number;\n  /** Current page number (1-based). */\n  pageNo: number;\n  /** Number of items per page. */\n  pageSize: number;\n  /** Number of sibling pages to show around the current page. */\n  siblingCount?: number;\n  /**\n   * Callback when a page is selected. When omitted, Pagination falls back\n   * to updating `?page=` in the URL via react-router history (matches v1\n   * neeto-ui behavior).\n   */\n  navigate?: (page: number) => void;\n  /** Additional CSS class names. */\n  className?: string;\n}\n\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      count,\n      pageNo,\n      pageSize,\n      siblingCount = 1,\n      navigate,\n      className,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const paginationRange = usePaginationRange({\n      count,\n      pageSize,\n      siblingCount,\n      pageNo,\n    });\n    const { updatePageInQueryParam } = usePaginationQueryParams();\n\n    const lastPage = paginationRange[paginationRange.length - 1] as number;\n    const isFirstPage = pageNo === 1;\n    const isLastPage = pageNo === lastPage;\n\n    // Don't render if only 1 page or no pages\n    if (pageNo === 0 || paginationRange.length < 2) {\n      return null;\n    }\n\n    const handleNavigate = navigate ?? updatePageInQueryParam;\n\n    return (\n      <PrimitivePagination ref={ref} className={cn(className)} {...otherProps}>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious\n              onClick={() => !isFirstPage && handleNavigate(pageNo - 1)}\n              aria-disabled={isFirstPage}\n              className={cn(isFirstPage && \"pointer-events-none opacity-50\")}\n              data-testid=\"left-navigate-button\"\n            />\n          </PaginationItem>\n\n          {paginationRange.map((page, index) => (\n            <PaginationItem key={`${page}-${index}`}>\n              {page === DOTS ? (\n                <PaginationEllipsis data-testid=\"dots\" />\n              ) : (\n                <PaginationLink\n                  isActive={page === pageNo}\n                  onClick={() => handleNavigate(page as number)}\n                >\n                  {page}\n                </PaginationLink>\n              )}\n            </PaginationItem>\n          ))}\n\n          <PaginationItem>\n            <PaginationNext\n              onClick={() => !isLastPage && handleNavigate(pageNo + 1)}\n              aria-disabled={isLastPage}\n              className={cn(isLastPage && \"pointer-events-none opacity-50\")}\n              data-testid=\"right-navigate-button\"\n            />\n          </PaginationItem>\n        </PaginationContent>\n      </PrimitivePagination>\n    );\n  }\n);\n\nPagination.displayName = \"Pagination\";\n\nexport { Pagination };\n"],"names":["useHistory","useMemo","forwardRef","jsx","PrimitivePagination","cn","jsxs","PaginationContent","PaginationItem","PaginationPrevious","PaginationEllipsis","PaginationLink","PaginationNext"],"mappings":"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"}