@xploreu/components 0.4.16 → 0.4.17

package/dist/chunk-VHXY2BUM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/composites/filter-combobox.tsx"],"names":["FilterCombobox","props","items","placeholder","icon","container","isPending","className","triggerClassName","contentClassName","disabled","infiniteScroll","isMultiple","controlledArray","single","defaultArray","internalValue","setInternalValue","valueArray","hasValue","search","setSearch","filteredItems","q","it","handleValueChange","next","arr","handleClear","triggerLabel","jsxs","Combobox","a","b","ComboboxTrigger","cn","jsx","ChevronDownIcon","ComboboxPopup","ComboboxInput","ComboboxStatus","ComboboxList","item","ComboboxItem","ComboboxItemTitle","ComboboxInfiniteScroll","Fragment"],"mappings":"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","file":"chunk-VHXY2BUM.js","sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { CheckCircle2Icon, ChevronDownIcon, SearchIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@xploreu/lib/cn\"\r\nimport {\r\n  ComboboxItemIndicator as ComboboxItemIndicatorPrimitive\r\n} from \"../primitives/combobox\"\r\nimport { ComboboxHighlightItem, ComboboxItem, ComboboxItemTitle } from \"../ui/combobox\"\r\nimport { Input } from \"../ui/input\"\r\nimport {\r\n  Combobox,\r\n  ComboboxInfiniteScroll,\r\n  ComboboxInput,\r\n  ComboboxList,\r\n  ComboboxPopup,\r\n  ComboboxPortal,\r\n  ComboboxStatus,\r\n  ComboboxTrigger,\r\n  type ComboboxProps,\r\n} from \"../ui/combobox\"\r\n\r\n// ─── Types ───\r\n\r\nexport type FilterComboboxItem = {\r\n  label: string\r\n  value: string\r\n}\r\n\r\ntype BaseProps = {\r\n  items: FilterComboboxItem[] | undefined\r\n  placeholder?: string\r\n  icon?: React.ReactNode\r\n  container?: React.ComponentProps<typeof ComboboxPortal>[\"container\"]\r\n  isPending?: boolean\r\n  className?: string\r\n  triggerClassName?: string\r\n  contentClassName?: string\r\n  disabled?: boolean\r\n  infiniteScroll?: React.ComponentProps<typeof ComboboxInfiniteScroll>\r\n}\r\n\r\ntype SingleProps = BaseProps & {\r\n  multiple?: false\r\n  value?: FilterComboboxItem | null\r\n  defaultValue?: FilterComboboxItem | null\r\n  onValueChange?: (value: FilterComboboxItem | null) => void\r\n}\r\n\r\ntype MultipleProps = BaseProps & {\r\n  multiple: true\r\n  value?: FilterComboboxItem[]\r\n  defaultValue?: FilterComboboxItem[]\r\n  onValueChange?: (value: FilterComboboxItem[]) => void\r\n}\r\n\r\nexport type FilterComboboxProps = SingleProps | MultipleProps\r\n\r\n// ─── Component ───\r\n\r\nfunction FilterCombobox(props: FilterComboboxProps) {\r\n  const {\r\n    items,\r\n    placeholder = \"Select\",\r\n    icon,\r\n    container,\r\n    isPending,\r\n    className,\r\n    triggerClassName,\r\n    contentClassName,\r\n    disabled,\r\n    infiniteScroll,\r\n  } = props\r\n\r\n  const isMultiple = props.multiple === true\r\n\r\n  // Normalize controlled value to array for internal combobox (always multiple=true internally)\r\n  const controlledArray = React.useMemo(() => {\r\n    if (isMultiple) {\r\n      return (props as MultipleProps).value\r\n    }\r\n    const single = (props as SingleProps).value\r\n    return single ? [single] : []\r\n  }, [isMultiple, (props as SingleProps).value, (props as MultipleProps).value])\r\n\r\n  const defaultArray = React.useMemo(() => {\r\n    if (isMultiple) {\r\n      return (props as MultipleProps).defaultValue ?? []\r\n    }\r\n    const single = (props as SingleProps).defaultValue\r\n    return single ? [single] : []\r\n  }, [isMultiple, (props as SingleProps).defaultValue, (props as MultipleProps).defaultValue])\r\n\r\n  const [internalValue, setInternalValue] = React.useState<FilterComboboxItem[]>(\r\n    () =>\r\n      (controlledArray !== undefined\r\n        ? (controlledArray as FilterComboboxItem[])\r\n        : (defaultArray as FilterComboboxItem[])) ?? []\r\n  )\r\n\r\n  // Sync when controlled value changes externally\r\n  React.useEffect(() => {\r\n    if (controlledArray !== undefined) {\r\n      setInternalValue(controlledArray as FilterComboboxItem[])\r\n    }\r\n  }, [controlledArray])\r\n\r\n  const valueArray = internalValue ?? []\r\n  const hasValue = valueArray.length > 0\r\n\r\n  // Search for multiple variant\r\n  const [search, setSearch] = React.useState(\"\")\r\n\r\n  const filteredItems = React.useMemo(() => {\r\n    if (!search.trim()) return items\r\n    const q = search.toLowerCase()\r\n    return items?.filter(\r\n      (it) => it.label.toLowerCase().includes(q) || it.value.toLowerCase().includes(q)\r\n    )\r\n  }, [items, search])\r\n\r\n  const handleValueChange: ComboboxProps<FilterComboboxItem, boolean>[\"onValueChange\"] = (\r\n    next\r\n  ) => {\r\n    const arr = next as FilterComboboxItem[]\r\n    if (isMultiple) {\r\n      setInternalValue(arr)\r\n        ; (props as MultipleProps).onValueChange?.(arr)\r\n    } else {\r\n      // single: take last selected (base-ui gives array)\r\n      const single = arr.length > 0 ? arr[arr.length - 1] : null\r\n      const normalized = single ? [single] : []\r\n      setInternalValue(normalized)\r\n        ; (props as SingleProps).onValueChange?.(single)\r\n    }\r\n  }\r\n\r\n  const handleClear = () => {\r\n    setInternalValue([])\r\n    if (isMultiple) {\r\n      ; (props as MultipleProps).onValueChange?.([])\r\n    } else {\r\n      ; (props as SingleProps).onValueChange?.(null)\r\n    }\r\n  }\r\n\r\n  // Trigger label\r\n  const triggerLabel = React.useMemo(() => {\r\n    if (!hasValue) {\r\n      return isMultiple ? `All ${placeholder}` : placeholder\r\n    }\r\n    if (isMultiple) {\r\n      return `${placeholder} (${valueArray.length})`\r\n    }\r\n    return valueArray[0]?.label ?? placeholder\r\n  }, [hasValue, isMultiple, placeholder, valueArray])\r\n\r\n  return (\r\n    <Combobox\r\n      multiple\r\n      items={items}\r\n      value={valueArray}\r\n      onValueChange={handleValueChange}\r\n      isItemEqualToValue={(a, b) => a.value === b.value}\r\n      disabled={disabled}\r\n    >\r\n      <ComboboxTrigger\r\n        className={cn(\r\n          \"group flex h-9 w-fit max-w-[220px] items-center gap-2 rounded-xp-card-base border bg-bg-primary px-3 text-body-medium-3 transition-colors\",\r\n          \"border-border-primary text-text-secondary hover:bg-bg-primary-hover\",\r\n          hasValue && \"border-border-brand bg-bg-brand-primary text-text-brand-secondary\",\r\n          \"disabled:pointer-events-none disabled:opacity-50\",\r\n          \"data-[popup-open]:border-border-brand data-[popup-open]:bg-bg-brand-primary data-[popup-open]:text-text-brand-secondary\",\r\n          triggerClassName,\r\n          className\r\n        )}\r\n      >\r\n        {icon && (\r\n          <span\r\n            className={cn(\r\n              \"size-4 shrink-0\",\r\n              hasValue ? \"text-fg-brand-primary\" : \"text-fg-quaternary\"\r\n            )}\r\n          >\r\n            {icon}\r\n          </span>\r\n        )}\r\n        <span className=\"truncate\">{triggerLabel}</span>\r\n        <ChevronDownIcon\r\n          className={cn(\r\n            \"size-4 shrink-0 transition-transform group-data-[popup-open]:rotate-180\",\r\n            hasValue ? \"text-fg-brand-primary\" : \"text-fg-quaternary\"\r\n          )}\r\n        />\r\n      </ComboboxTrigger>\r\n\r\n      <ComboboxPopup\r\n        container={container}\r\n        className={cn(\"w-72\", contentClassName)}\r\n        align=\"start\"\r\n        sideOffset={8}\r\n      >\r\n        {isMultiple ? (\r\n          <div className=\"flex flex-col\">\r\n            {/* Header: title + Clear (n) */}\r\n            <div className=\"flex items-center justify-between px-3 py-2 border-b border-border-primary\">\r\n              <span className=\"text-label-semibold-3 text-text-primary\">{placeholder}</span>\r\n              <button\r\n                type=\"button\"\r\n                disabled={!hasValue}\r\n                onClick={handleClear}\r\n                className={cn(\r\n                  \"text-body-medium-3 transition-colors\",\r\n                  hasValue\r\n                    ? \"cursor-pointer text-text-brand-secondary hover:text-text-brand-secondary-hover\"\r\n                    : \"cursor-not-allowed text-text-disabled\"\r\n                )}\r\n              >\r\n                Clear{hasValue ? ` (${valueArray.length})` : \"\"}\r\n              </button>\r\n            </div>\r\n\r\n            {/* Search */}\r\n            <ComboboxInput\r\n              value={search}\r\n              onChange={(e) => setSearch(e.target.value)}\r\n              placeholder={`Search ${placeholder.toLowerCase()}...`}\r\n            />\r\n\r\n            {/* List */}\r\n            <ComboboxStatus\r\n              status={\r\n                isPending || items === undefined\r\n                  ? \"pending\"\r\n                  : filteredItems?.length === 0\r\n                    ? \"empty\"\r\n                    : null\r\n              }\r\n            />\r\n            <ComboboxList>\r\n              {filteredItems?.map((item) => (\r\n                <ComboboxItem indicator=\"checkbox\" key={item.value} value={item}>\r\n                  <ComboboxItemTitle>\r\n                    {item.label}\r\n                  </ComboboxItemTitle>\r\n                </ComboboxItem>\r\n              )\r\n              )}\r\n              <ComboboxInfiniteScroll {...infiniteScroll} />\r\n            </ComboboxList>\r\n          </div>\r\n        ) : (\r\n          <>\r\n            <ComboboxStatus\r\n              status={\r\n                isPending || items === undefined\r\n                  ? \"pending\"\r\n                  : items?.length === 0\r\n                    ? \"empty\"\r\n                    : null\r\n              }\r\n            />\r\n            <ComboboxList>\r\n              {items?.map((item) => (\r\n                <ComboboxItem key={item.value} value={item}>\r\n                  <ComboboxItemTitle>\r\n                    {item.label}\r\n                  </ComboboxItemTitle>\r\n                </ComboboxItem>\r\n              ))}\r\n              <ComboboxInfiniteScroll {...infiniteScroll} />\r\n            </ComboboxList>\r\n          </>\r\n        )}\r\n      </ComboboxPopup>\r\n    </Combobox>\r\n  )\r\n}\r\n\r\nexport { FilterCombobox }\r\n"]}