periplo-ui 3.15.1 → 3.16.0

package/README.md

@@ -74,6 +74,37 @@
 
    - Refer to documentation for individual component usage and API reference: https://periplo-ui.vercel.app/?path=/docs/getting-started--docs
 
+## 🔧 Local Storybook Package Installation
+
+You can test this Storybook package locally before publishing by following these steps:
+
+### 📦 In the Storybook project:
+
+1. **Install dependencies:**
+   ```bash
+   npm install
+   ```
+
+2. **Build the project (if needed):**
+   ```bash
+   npm run build
+   ```
+
+3. **Package the project:**
+   This will generate a .tgz file in the project root.
+   ```bash
+   npm pack
+   ```
+
+### 📥 In the target project:
+
+1. **Install the package locally** (replace the path with your .tgz file path):
+   ```bash
+   npm install /path/to/your/file/periplo-ui-1.0.0.tgz --force
+   ```
+
+⚠️ Make sure to use the correct absolute or relative path to the .tgz file generated with npm pack.
+
 ## Available Commands:
 
 | Command             | Description                                                    |

package/dist/components/InlineMultiSelect/InlineMultiSelect.d.ts

@@ -0,0 +1,62 @@
+import { ControllerFieldState } from 'react-hook-form';
+import * as React from 'react';
+/** Represents a selectable option in the InlineMultiSelect */
+type Option = {
+    value: string;
+    label: string;
+};
+/** Props for the InlineMultiSelect component */
+export type InlineMultiSelectProps = {
+    /** Array of options to display in the select */
+    options: Array<Option>;
+    /** Currently selected values (controlled) */
+    value?: Array<string>;
+    /** Callback fired when selection changes */
+    onChange?: (value: string[]) => void;
+    /** Form field state from react-hook-form */
+    fieldState?: ControllerFieldState;
+    /** Default selected values (uncontrolled) */
+    defaultValue?: Array<string>;
+    /** Placeholder text when no items are selected */
+    placeholder?: string;
+    /** Text to show when no options match the search */
+    notFoundText?: string;
+    /** Placeholder for the search input */
+    commandInputPlaceholder?: string;
+    /** Maximum number of items that can be selected */
+    max?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * InlineMultiSelect Component
+ *
+ * A controlled multi-select component that displays selected items inline with search functionality.
+ * Supports keyboard navigation, maximum selection limit, and custom styling.
+ *
+ * @example
+ * ```tsx
+ * // Controlled usage
+ * const [value, setValue] = useState<string[]>([])
+ * <InlineMultiSelect
+ *   options={[{ value: '1', label: 'Option 1' }]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ *
+ * // With react-hook-form
+ * const { control } = useForm()
+ * <Controller
+ *   name="myField"
+ *   control={control}
+ *   render={({ field }) => (
+ *     <InlineMultiSelect
+ *       {...field}
+ *       options={options}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare const InlineMultiSelect: React.ForwardRefExoticComponent<InlineMultiSelectProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/InlineMultiSelect/InlineMultiSelect.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { X, CaretUpDown, Check } from '@phosphor-icons/react';
+import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../Button/Button.js';
+
+const InlineMultiSelect = React.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    defaultValue,
+    placeholder,
+    notFoundText,
+    fieldState,
+    commandInputPlaceholder,
+    max,
+    className
+  }, _ref) => {
+    const inputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const [visibleItems, setVisibleItems] = React.useState([]);
+    const [hiddenCount, setHiddenCount] = React.useState(0);
+    const [internalSelected, setInternalSelected] = React.useState(
+      options.filter((option) => defaultValue?.includes(option.value) ?? [])
+    );
+    const selected = value ? options.filter((option) => value.includes(option.value)) : internalSelected;
+    const handleSelectionChange = React.useCallback(
+      (newSelected) => {
+        if (!value) {
+          setInternalSelected(newSelected);
+        }
+        onChange?.(newSelected.map((s) => s.value));
+      },
+      [value, onChange]
+    );
+    const removeItem = React.useCallback(
+      (itemToRemove) => {
+        const newSelected = itemToRemove ? selected.filter((s) => s.value !== itemToRemove.value) : selected.slice(0, -1);
+        handleSelectionChange(newSelected);
+      },
+      [selected, handleSelectionChange]
+    );
+    const handleUnselect = React.useCallback(
+      (item, e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        removeItem(item);
+      },
+      [removeItem]
+    );
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        const input = inputRef.current;
+        if (input) {
+          if ((e.key === "Delete" || e.key === "Backspace") && input.value === "") {
+            removeItem();
+          }
+          if (e.key === "Escape") {
+            input.blur();
+          }
+        }
+      },
+      [removeItem]
+    );
+    React.useEffect(() => {
+      const updateVisibleItems = () => {
+        if (!containerRef.current || selected.length === 0) return;
+        const maxVisibleItems = 2;
+        const visibleCount = Math.min(selected.length, maxVisibleItems);
+        setVisibleItems(selected.slice(0, visibleCount));
+        setHiddenCount(selected.length - visibleCount);
+      };
+      updateVisibleItems();
+      window.addEventListener("resize", updateVisibleItems);
+      return () => window.removeEventListener("resize", updateVisibleItems);
+    }, [selected]);
+    return /* @__PURE__ */ jsx(PopoverRoot, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(Command, { onKeyDown: handleKeyDown, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "ghost",
+          "aria-expanded": open,
+          className: cn(
+            "w-full justify-between bg-[#fff] pl-2 pr-2",
+            fieldState?.invalid ? "border-error-400 focus-within:border-error-700" : "",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center whitespace-nowrap", children: selected.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              visibleItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "bg-muted flex items-center gap-1 rounded px-1 py-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: item.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (e) => handleUnselect(item, e),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        handleUnselect(item, e);
+                      }
+                    },
+                    "aria-label": `Eliminar ${item.label}`,
+                    className: "hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full",
+                    children: /* @__PURE__ */ jsx(X, { className: "text-muted-foreground h-3 w-3" })
+                  }
+                )
+              ] }, item.value)),
+              hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex flex-shrink-0 items-center whitespace-nowrap text-sm", children: [
+                "+",
+                hiddenCount
+              ] })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) }) }),
+            /* @__PURE__ */ jsx(CaretUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { className: "px-0 py-0", children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: commandInputPlaceholder ?? "Search...",
+            value: inputValue,
+            onValueChange: setInputValue,
+            children: max && /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-md px-2 py-1 text-sm", children: [
+              selected.length,
+              " / ",
+              max
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: notFoundText ?? "Options not found" }),
+          open && options.length > 0 && /* @__PURE__ */ jsx(CommandGroup, { children: options.map((item) => /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onSelect: () => {
+                const isSelected = selected.find((s) => s.value === item.value);
+                if (isSelected) {
+                  handleSelectionChange(selected.filter((s) => s.value !== item.value));
+                } else {
+                  if (max && selected.length >= max) return;
+                  setInputValue("");
+                  handleSelectionChange([...selected, item]);
+                }
+              },
+              className: "cursor-pointer",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-2", children: selected.find((s) => s.value === item.value) ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx("div", { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx("div", { children: item.label })
+              ] })
+            },
+            `item-${item.value}`
+          )) })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+InlineMultiSelect.displayName = "InlineMultiSelect";
+
+export { InlineMultiSelect };
+//# sourceMappingURL=InlineMultiSelect.js.map

package/dist/components/InlineMultiSelect/InlineMultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineMultiSelect.js","sources":["../../../src/components/InlineMultiSelect/InlineMultiSelect.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { CaretUpDown, Check, X } from '@phosphor-icons/react'\nimport { PopoverRoot, PopoverContent, PopoverTrigger } from '../Popover'\nimport { ControllerFieldState } from 'react-hook-form'\nimport { cn } from '@/lib/utils'\nimport { Button } from '../Button'\n\n/** Represents a selectable option in the InlineMultiSelect */\ntype Option = { value: string; label: string }\n\n/** Props for the InlineMultiSelect component */\nexport type InlineMultiSelectProps = {\n  /** Array of options to display in the select */\n  options: Array<Option>\n  /** Currently selected values (controlled) */\n  value?: Array<string>\n  /** Callback fired when selection changes */\n  onChange?: (value: string[]) => void\n  /** Form field state from react-hook-form */\n  fieldState?: ControllerFieldState\n  /** Default selected values (uncontrolled) */\n  defaultValue?: Array<string>\n  /** Placeholder text when no items are selected */\n  placeholder?: string\n  /** Text to show when no options match the search */\n  notFoundText?: string\n  /** Placeholder for the search input */\n  commandInputPlaceholder?: string\n  /** Maximum number of items that can be selected */\n  max?: number\n  /** Additional CSS classes */\n  className?: string\n}\n\n/**\n * InlineMultiSelect Component\n *\n * A controlled multi-select component that displays selected items inline with search functionality.\n * Supports keyboard navigation, maximum selection limit, and custom styling.\n *\n * @example\n * ```tsx\n * // Controlled usage\n * const [value, setValue] = useState<string[]>([])\n * <InlineMultiSelect\n *   options={[{ value: '1', label: 'Option 1' }]}\n *   value={value}\n *   onChange={setValue}\n * />\n *\n * // With react-hook-form\n * const { control } = useForm()\n * <Controller\n *   name=\"myField\"\n *   control={control}\n *   render={({ field }) => (\n *     <InlineMultiSelect\n *       {...field}\n *       options={options}\n *     />\n *   )}\n * />\n * ```\n */\nexport const InlineMultiSelect = React.forwardRef<HTMLInputElement, InlineMultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      defaultValue,\n      placeholder,\n      notFoundText,\n      fieldState,\n      commandInputPlaceholder,\n      max,\n      className,\n    },\n    _ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const [open, setOpen] = React.useState(false)\n    const [inputValue, setInputValue] = React.useState('')\n    const [visibleItems, setVisibleItems] = React.useState<Option[]>([])\n    const [hiddenCount, setHiddenCount] = React.useState(0)\n\n    // Use controlled value if provided, otherwise use internal state\n    const [internalSelected, setInternalSelected] = React.useState<InlineMultiSelectProps['options']>(\n      options.filter((option) => defaultValue?.includes(option.value) ?? []),\n    )\n\n    const selected = value ? options.filter((option) => value.includes(option.value)) : internalSelected\n\n    const handleSelectionChange = React.useCallback(\n      (newSelected: Option[]) => {\n        if (!value) {\n          // Uncontrolled mode\n          setInternalSelected(newSelected)\n        }\n        // Always call onChange with the new values\n        onChange?.(newSelected.map((s) => s.value))\n      },\n      [value, onChange],\n    )\n\n    /**\n     * Removes an item from the selection\n     * @param itemToRemove - Optional item to remove. If not provided, removes the last item\n     */\n    const removeItem = React.useCallback(\n      (itemToRemove?: Option) => {\n        const newSelected = itemToRemove\n          ? selected.filter((s) => s.value !== itemToRemove.value)\n          : selected.slice(0, -1)\n\n        handleSelectionChange(newSelected)\n      },\n      [selected, handleSelectionChange],\n    )\n\n    /**\n     * Handles the unselect action when clicking the remove button\n     * @param item - The item to remove\n     * @param e - The event object\n     */\n    const handleUnselect = React.useCallback(\n      (item: Option, e: React.MouseEvent | React.KeyboardEvent) => {\n        e.stopPropagation()\n        e.preventDefault()\n        removeItem(item)\n      },\n      [removeItem],\n    )\n\n    /**\n     * Handles keyboard events for the component\n     * - Delete/Backspace: Removes last item when input is empty\n     * - Escape: Blurs the input\n     */\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLDivElement>) => {\n        const input = inputRef.current\n        if (input) {\n          if ((e.key === 'Delete' || e.key === 'Backspace') && input.value === '') {\n            removeItem()\n          }\n          if (e.key === 'Escape') {\n            input.blur()\n          }\n        }\n      },\n      [removeItem],\n    )\n\n    /**\n     * Effect to update visible items and handle responsive behavior\n     * Shows a maximum of 2 items and displays a count for the rest\n     */\n    React.useEffect(() => {\n      const updateVisibleItems = () => {\n        if (!containerRef.current || selected.length === 0) return\n\n        const maxVisibleItems = 2\n        const visibleCount = Math.min(selected.length, maxVisibleItems)\n\n        setVisibleItems(selected.slice(0, visibleCount))\n        setHiddenCount(selected.length - visibleCount)\n      }\n\n      updateVisibleItems()\n      window.addEventListener('resize', updateVisibleItems)\n      return () => window.removeEventListener('resize', updateVisibleItems)\n    }, [selected])\n\n    return (\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <Command onKeyDown={handleKeyDown}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              aria-expanded={open}\n              className={cn(\n                'w-full justify-between bg-[#fff] pl-2 pr-2',\n                fieldState?.invalid ? 'border-error-400 focus-within:border-error-700' : '',\n                className,\n              )}\n            >\n              <div ref={containerRef} className=\"flex flex-1 flex-wrap items-center gap-1 overflow-hidden pr-2\">\n                <div className=\"flex items-center whitespace-nowrap\">\n                  {selected.length > 0 ? (\n                    <>\n                      {visibleItems.map((item) => (\n                        <div key={item.value} className=\"bg-muted flex items-center gap-1 rounded px-1 py-0.5\">\n                          <span className=\"text-sm\">{item.label}</span>\n                          <span\n                            role=\"button\"\n                            tabIndex={0}\n                            onClick={(e) => handleUnselect(item, e)}\n                            onKeyDown={(e) => {\n                              if (e.key === 'Enter' || e.key === ' ') {\n                                handleUnselect(item, e)\n                              }\n                            }}\n                            aria-label={`Eliminar ${item.label}`}\n                            className=\"hover:bg-muted-foreground/20 flex h-4 w-4 items-center justify-center rounded-full\"\n                          >\n                            <X className=\"text-muted-foreground h-3 w-3\" />\n                          </span>\n                        </div>\n                      ))}\n                      {hiddenCount > 0 && (\n                        <span className=\"text-muted-foreground inline-flex flex-shrink-0 items-center whitespace-nowrap text-sm\">\n                          +{hiddenCount}\n                        </span>\n                      )}\n                    </>\n                  ) : (\n                    <span className=\"text-muted-foreground\">{placeholder}</span>\n                  )}\n                </div>\n              </div>\n              <CaretUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"px-0 py-0\">\n            <CommandInput\n              placeholder={commandInputPlaceholder ?? 'Search...'}\n              value={inputValue}\n              onValueChange={setInputValue}\n            >\n              {max && (\n                <div className=\"bg-muted rounded-md px-2 py-1 text-sm\">\n                  {selected.length} / {max}\n                </div>\n              )}\n            </CommandInput>\n            <CommandList>\n              <CommandEmpty>{notFoundText ?? 'Options not found'}</CommandEmpty>\n              {open && options.length > 0 && (\n                <CommandGroup>\n                  {options.map((item) => (\n                    <CommandItem\n                      key={`item-${item.value}`}\n                      onMouseDown={(e) => {\n                        e.preventDefault()\n                        e.stopPropagation()\n                      }}\n                      onSelect={() => {\n                        const isSelected = selected.find((s) => s.value === item.value)\n                        if (isSelected) {\n                          handleSelectionChange(selected.filter((s) => s.value !== item.value))\n                        } else {\n                          if (max && selected.length >= max) return\n                          setInputValue('')\n                          handleSelectionChange([...selected, item])\n                        }\n                      }}\n                      className=\"cursor-pointer\"\n                    >\n                      <div className=\"flex items-center\">\n                        <div className=\"mr-2\">\n                          {selected.find((s) => s.value === item.value) ? (\n                            <Check className=\"h-4 w-4\" />\n                          ) : (\n                            <div className=\"h-4 w-4\" />\n                          )}\n                        </div>\n                        <div>{item.label}</div>\n                      </div>\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              )}\n            </CommandList>\n          </PopoverContent>\n        </Command>\n      </PopoverRoot>\n    )\n  },\n)\n\nInlineMultiSelect.displayName = 'InlineMultiSelect'\n"],"names":[],"mappings":";;;;;;;;;AAmEO;AAAgC;AAEnC;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIF;AACA;AACA;AACA;AACA;AACA;AAGA;AAAsD;AACiB;AAGvE;AAEA;AAAoC;AAEhC;AAEE;AAA+B;AAGjC;AAA0C;AAC5C;AACgB;AAOlB;AAAyB;AAErB;AAIA;AAAiC;AACnC;AACgC;AAQlC;AAA6B;AAEzB;AACA;AACA;AAAe;AACjB;AACW;AAQb;AAA4B;AAExB;AACA;AACE;AACE;AAAW;AAEb;AACE;AAAW;AACb;AACF;AACF;AACW;AAOb;AACE;AACE;AAEA;AACA;AAEA;AACA;AAA6C;AAG/C;AACA;AACA;AAAoE;AAGtE;AAGM;AACE;AAAC;AAAA;AACS;AACO;AACJ;AACT;AACyE;AACzE;AACF;AAEA;AAIS;AAEG;AAAsC;AACtC;AAAC;AAAA;AACM;AACK;AAC4B;AAEpC;AACE;AAAsB;AACxB;AACF;AACkC;AACxB;AAEmC;AAAA;AAC/C;AAEH;AAE0G;AAAA;AACrG;AACJ;AAOV;AACqD;AAAA;AAAA;AAEzD;AAEE;AAAA;AAAC;AAAA;AACyC;AACjC;AACQ;AAIV;AAAS;AAAO;AAAI;AACvB;AAAA;AAEJ;AAEE;AAAmD;AAI7C;AAAC;AAAA;AAGG;AACA;AAAkB;AACpB;AAEE;AACA;AACE;AAAoE;AAEpE;AACA;AACA;AAAyC;AAC3C;AACF;AACU;AAGR;AAMA;AACiB;AACnB;AAAA;AA1BuB;AA6B7B;AAEJ;AACF;AAEJ;AAGN;AAEA;;"}

package/dist/components/InlineMultiSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './InlineMultiSelect';

package/dist/components/InlineMultiSelect/index.js

@@ -0,0 +1,2 @@
+export { InlineMultiSelect } from './InlineMultiSelect.js';
+//# sourceMappingURL=index.js.map

package/dist/components/InlineMultiSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -39,3 +39,4 @@ export * from './components/Combobox';
 export * from './components/Table';
 export * from './components/DataTable';
 export * from './components/Collapsible';
+export * from './components/InlineMultiSelect';

package/dist/index.js

@@ -38,4 +38,5 @@ export { SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, Sideba
 export { Combobox } from './components/Combobox/Combobox.js';
 export { DataTable } from './components/DataTable/DataTable.js';
 export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from './components/Collapsible/Collapsible.js';
+export { InlineMultiSelect } from './components/InlineMultiSelect/InlineMultiSelect.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.15.1",
+  "version": "3.16.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",