@next-degree/pickle-shared-js 0.2.5 → 0.2.7

package/dist/ui/Select.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/ui/Select.tsx","../../src/lib/utils.ts","../../src/components/ui/Label.tsx","../../src/components/ui/Chip.tsx","../../src/components/primitives/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { CheckIcon, ChevronDownIcon, X } from \"lucide-react\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport Label from \"@/components/ui/Label\";\nimport Chip from \"@/components/ui/Chip\";\nimport { Separator } from \"@/components/primitives/separator\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props\n  extends Omit<ComponentPropsWithoutRef<\"select\">, \"value\" | \"onChange\"> {\n  label: string;\n  value?: string | string[];\n  options?: { id: string | number; value: string; title: string }[];\n  placeholder?: string;\n  multiselect?: boolean;\n  onChange?: (value: string | string[]) => void;\n  classNames?: { label?: string };\n}\n\nconst Select = forwardRef<HTMLButtonElement, Props>(\n  ({ label, options, placeholder, multiselect, classNames, ...props }, ref) => {\n    const { value, defaultValue, dir, className, onChange, ...rest } = props;\n    const [selected, setSelected] = useState<string[]>([]);\n    const [open, setOpen] = useState(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!value) return setSelected([]);\n      setSelected(Array.isArray(value) ? value : [value]);\n    }, [value]);\n\n    const toggleOpen = () => setOpen((prev) => !prev);\n    const closeOnEscape = (event: KeyboardEvent) =>\n      event.key === \"Escape\" && setOpen(false);\n    const setValueOnEnter = (event: KeyboardEvent, value: string) =>\n      event.key === \"Enter\" && handleChange(value);\n\n    const chipLabels = selected\n      ?.map((s) => options?.find(({ value }) => value === s))\n      .filter(Boolean);\n\n    function handleLabels() {\n      if (multiselect) {\n        return selected\n          .map((o) => options?.find((option) => option.value === o)?.title)\n          .join(\", \");\n      }\n      return options?.find((option) => option.value === selected.join())?.title;\n    }\n\n    function handleOnOpenChange(isOpen: boolean) {\n      if (!multiselect || isOpen) setOpen(isOpen);\n    }\n\n    function handleChange(newValue: string) {\n      let newSelected: string[] = [];\n      setSelected((prev) => {\n        newSelected = prev.includes(newValue)\n          ? prev.filter((item) => item !== newValue)\n          : [...prev, newValue];\n        return multiselect ? newSelected : [newValue];\n      });\n      onChange?.(multiselect ? newSelected : newValue);\n    }\n\n    return (\n      <div\n        className={cn(\"flex flex-col space-y-2\", className)}\n        ref={containerRef}\n      >\n        <Label text={label} className={classNames?.label} />\n\n        <SelectPrimitive.Root\n          open={open}\n          value={selected.join(\",\")}\n          onOpenChange={handleOnOpenChange}\n          onValueChange={multiselect ? undefined : handleChange}\n          defaultValue={\n            typeof defaultValue === \"string\" ? defaultValue : undefined\n          }\n          dir={dir === \"rtl\" ? \"rtl\" : \"ltr\"}\n          {...rest}\n        >\n          <SelectPrimitive.Trigger\n            ref={ref}\n            data-testid={`${label.toLowerCase()}-select-element`}\n            className=\"group flex min-w-80 flex-row items-center justify-between gap-3 rounded-lg border border-grey-20 px-4 py-3 text-sm font-normal focus:outline-purple-100 disabled:bg-grey-5 data-[placeholder]:text-grey-50 data-[placeholder]:disabled:text-grey-40\"\n          >\n            <span className=\"truncate\">\n              <SelectPrimitive.Value\n                placeholder={placeholder ?? \"Select an option\"}\n                aria-label={handleLabels()}\n              >\n                {handleLabels()}\n              </SelectPrimitive.Value>\n            </span>\n\n            <ChevronDownIcon\n              className=\"transform text-black group-data-[state=open]:rotate-180\"\n              size=\"16\"\n            />\n          </SelectPrimitive.Trigger>\n\n          <SelectPrimitive.Portal container={containerRef.current}>\n            <SelectPrimitive.Content\n              hideWhenDetached\n              className=\"z-10 max-h-[var(--radix-select-content-available-height)] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md bg-white py-2 shadow-lg\"\n              position=\"popper\"\n              sideOffset={4}\n              onPointerDownOutside={toggleOpen}\n              onKeyDown={closeOnEscape}\n            >\n              <SelectPrimitive.Viewport>\n                {multiselect && !!chipLabels?.length && (\n                  <SelectPrimitive.Group\n                    className=\"mb-2 flex flex-row flex-wrap gap-1 px-2\"\n                    data-testid=\"selected-labels\"\n                  >\n                    {chipLabels?.map(\n                      (chip) =>\n                        chip && (\n                          <Chip key={chip.title} size=\"small\" variant=\"primary\">\n                            <span>{chip.title}</span>\n                            <X\n                              size={18}\n                              data-testid={`chip-remove-${chip.value}`}\n                              className=\"cursor-pointer\"\n                              onClick={() => handleChange(chip.value)}\n                            />\n                          </Chip>\n                        )\n                    )}\n                  </SelectPrimitive.Group>\n                )}\n                <Separator />\n                {options?.map(({ id, title, value }) => (\n                  <SelectPrimitive.Item\n                    key={id}\n                    value={value}\n                    className=\"group relative cursor-pointer px-4 py-2 text-left text-sm hover:bg-purple-50 focus:bg-purple-50 focus:outline-none data-[state=checked]:bg-purple-50 data-[state=checked]:pr-10 data-[state=checked]:text-purple-100\"\n                    data-state={\n                      selected.includes(value) ? \"checked\" : \"unchecked\"\n                    }\n                    onKeyDown={(e) => setValueOnEnter(e, value)}\n                    onClick={() => handleChange(value)}\n                  >\n                    <SelectPrimitive.ItemText>{title}</SelectPrimitive.ItemText>\n                    <CheckIcon\n                      className=\"absolute inset-y-0 right-3 my-auto hidden w-6 text-purple-100 group-data-[state=checked]:block\"\n                      size={16}\n                    />\n                  </SelectPrimitive.Item>\n                ))}\n              </SelectPrimitive.Viewport>\n            </SelectPrimitive.Content>\n          </SelectPrimitive.Portal>\n        </SelectPrimitive.Root>\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\n\nexport default Select;\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { type ComponentPropsWithoutRef } from 'react'\n\nimport { cn } from '@/lib/utils'\n\ninterface Props extends ComponentPropsWithoutRef<'label'> {\n  text?: string\n}\n\nfunction Label({ text, className, ...props }: Readonly<Props>) {\n  if (!text) return null\n\n  return (\n    <label\n      className={cn(\n        'text-xs text-grey-80 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </label>\n  )\n}\n\nexport default Label\n","import { cva, type VariantProps } from 'cva'\nimport React from 'react'\nimport { twMerge } from 'tailwind-merge'\n\ninterface ChipProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {}\n\nconst Chip = ({ className, variant, size, ...props }: ChipProps) => (\n  <div className={twMerge(chipVariants({ variant, size, className }))} {...props} />\n)\n\nconst chipVariants = cva(['flex', 'items-center', 'rounded-3xl', 'border', 'w-fit'], {\n  variants: {\n    variant: {\n      neutral: ['text-grey-80', 'border-grey-10'],\n      primary: ['text-purple-100', 'border-purple-20'],\n      danger: ['text-pumpkin-100', 'border-pumpkin-20'],\n      onboarding: ['text-green-100', 'bg-green-10', 'cursor-pointer'],\n      onboardingSelected: ['text-white', 'bg-green-90', 'cursor-pointer'],\n    },\n    size: {\n      small: ['text-sm', 'leading-5', 'px-2', 'py-1', 'gap-1.5'],\n      medium: ['text-base', 'leading-6', 'px-3', 'py-2', 'gap-2'],\n    },\n  },\n  defaultVariants: {\n    variant: 'neutral',\n    size: 'medium',\n  },\n})\n\nexport default Chip\n","'use client'\r\n\r\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\r\nimport * as React from 'react'\r\n\r\nimport { cn } from '@/lib/utils'\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>\r\n>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (\r\n  <SeparatorPrimitive.Root\r\n    ref={ref}\r\n    decorative={decorative}\r\n    orientation={orientation}\r\n    className={cn(\r\n      'shrink-0 bg-grey-10',\r\n      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n"],"mappings":"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","names":["SelectPrimitive","CheckIcon","ChevronDownIcon","X","forwardRef","useEffect","useRef","useState","clsx","twMerge","cn","inputs","Label","text","className","props","cn","Label_default","cva","React","twMerge","Chip","className","variant","size","props","chipVariants","Chip_default","SeparatorPrimitive","React","Separator","className","orientation","decorative","props","ref","cn","Select","forwardRef","label","options","placeholder","multiselect","classNames","props","ref","value","defaultValue","dir","className","onChange","rest","selected","setSelected","useState","open","setOpen","containerRef","useRef","useEffect","toggleOpen","prev","closeOnEscape","event","setValueOnEnter","handleChange","chipLabels","s","handleLabels","o","option","handleOnOpenChange","isOpen","newValue","newSelected","item","cn","Label_default","ChevronDownIcon","chip","Chip_default","X","Separator","id","title","e","CheckIcon","Select_default"]}