@yamada-ui/react/dist/cjs/components/select/select.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"select.cjs","names":["createSlotComponent","selectStyle","XIcon","useGroupItemProps","useSelect","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","SelectContext","styled","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","useSelectOption","CheckIcon"],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { SelectStyle } from \"./select.style\"\nimport type {\n  UseSelectOptionProps,\n  UseSelectProps,\n  UseSelectReturn,\n} from \"./use-select\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { selectStyle } from \"./select.style\"\nimport { SelectContext, useSelect, useSelectOption } from \"./use-select\"\n\ninterface ComponentContext\n  extends Pick<UseSelectReturn, \"getSeparatorProps\">,\n    Pick<SelectRootProps, \"groupProps\" | \"optionProps\"> {}\n\nexport interface SelectRootProps<Multiple extends boolean = false>\n  extends Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"value\"\n    >,\n    UseSelectProps<Multiple>,\n    PopupAnimationProps,\n    ThemeProps<SelectStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default false\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the select.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: SelectContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<SelectGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: SelectIconProps\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<SelectOptionProps, \"children\" | \"value\">\n  /**\n   * Props for placeholder element.\n   */\n  placeholderProps?: Omit<SelectOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: SelectPropsContext,\n  useComponentContext,\n  usePropsContext: useSelectPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<SelectRootProps, SelectStyle, ComponentContext>(\n  \"select\",\n  selectStyle,\n)\n\nexport { SelectPropsContext, useSelectPropsContext }\n\n/**\n * `Select` is a component used for allowing a user to choose one option from a list.\n *\n * @see https://yamada-ui.com/docs/components/select\n */\nexport const SelectRoot = withProvider<\"div\", SelectRootProps>(\n  <Multiple extends boolean = false>(props: SelectRootProps<Multiple>) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        groupProps,\n        iconProps,\n        optionProps,\n        placeholderProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: SelectGroup,\n        Label: SelectLabel,\n        Option: SelectOption,\n      })\n    }, [itemsProp, children])\n    const {\n      descendants,\n      includePlaceholder,\n      items: computedItems,\n      max,\n      placeholder,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onChange,\n      onClose,\n      onSelect,\n    } = useSelect({ items, ...rest })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(() => {\n      if (children)\n        return (\n          <>\n            {placeholder ? (\n              <SelectOption\n                {...placeholderProps}\n                hidden={!includePlaceholder}\n                value=\"\"\n              >\n                {placeholder}\n              </SelectOption>\n            ) : null}\n\n            {children}\n          </>\n        )\n\n      return createComboboxChildren(computedItems, {\n        Group: SelectGroup,\n        Option: SelectOption,\n      })\n    }, [\n      children,\n      computedItems,\n      placeholder,\n      includePlaceholder,\n      placeholderProps,\n    ])\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ max, value, onActiveDescendant, onChange, onClose, onSelect }),\n      [max, onActiveDescendant, onChange, onClose, onSelect, value],\n    )\n    const selectContext = useMemo(() => ({ max, value }), [max, value])\n    const componentContext = useMemo(\n      () => ({ getSeparatorProps, groupProps, optionProps }),\n      [getSeparatorProps, groupProps, optionProps],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <SelectContext value={selectContext}>\n            <ComponentContext value={componentContext}>\n              <Popover.Root {...mergedPopoverProps}>\n                <styled.input {...getInputProps()} />\n\n                <InputGroup.Root\n                  className={className}\n                  css={css}\n                  colorScheme={colorScheme}\n                  {...getRootProps({ ...groupItemProps, ...rootProps })}\n                >\n                  <Popover.Trigger>\n                    <SelectField {...getFieldProps(varProps)} />\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <SelectIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <SelectIcon icon={icon} {...getIconProps(iconProps)} />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <SelectContent\n                  {...cast<SelectContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </SelectContent>\n              </Popover.Root>\n            </ComponentContext>\n          </SelectContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: SelectRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface SelectFieldProps extends HTMLStyledProps {}\n\nconst SelectField = withContext<\"div\", SelectFieldProps>(\"div\", \"field\")(\n  { \"data-group-propagate\": \"\" },\n  ({ children, ...rest }) => ({\n    ...rest,\n    children: <SelectValueText>{children}</SelectValueText>,\n  }),\n)\n\ninterface SelectIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst SelectIcon = withContext<\"div\", SelectIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <ChevronDownIcon />,\n    ...rest,\n  }),\n)\n\ninterface SelectValueTextProps extends HTMLProps<\"span\"> {}\n\nconst SelectValueText = withContext<\"span\", SelectValueTextProps>(\n  \"span\",\n  \"valueText\",\n)()\n\ninterface SelectContentProps extends Popover.ContentProps {}\n\nconst SelectContent = withContext<\"div\", SelectContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface SelectLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const SelectLabel = withContext<\"span\", SelectLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface SelectGroupProps\n  extends UseComboboxGroupProps,\n    HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: SelectLabelProps\n}\n\nexport const SelectGroup = withContext<\"div\", SelectGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup({\n      ...groupProps,\n      ...rest,\n    })\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? <SelectLabel {...labelProps}>{label}</SelectLabel> : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface SelectOptionProps\n  extends UseSelectOptionProps,\n    HTMLStyledProps {\n  /**\n   * The icon to be used in the select option.\n   */\n  icon?: ReactNode\n}\n\nexport const SelectOption = withContext<\"div\", SelectOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useSelectOption({\n      ...optionProps,\n      ...rest,\n    })\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <SelectIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </SelectIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface SelectIndicatorProps extends HTMLStyledProps {}\n\nconst SelectIndicator = withContext<\"div\", SelectIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n\nexport interface SelectSeparatorProps extends HTMLStyledProps<\"hr\"> {}\n\nexport const SelectSeparator = withContext<\"hr\", SelectSeparatorProps>(\n  \"hr\",\n  \"separator\",\n)(undefined, (props) => {\n  const { getSeparatorProps } = useComponentContext()\n\n  return getSeparatorProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACEA,6CACF,UACAC,iCACD;;;;;;AASD,MAAa,aAAa,cACW,UAAqC;CACtE,MAAM,CACJ,gBACA,EACE,WACA,KACA,aACA,kBAAkB,eAClB,UACA,WACA,YAAY,2CAACC,yBAAQ,EACrB,UACA,kBACA,kBACA,MACA,OAAO,WACP,cACA,cACA,YACA,WACA,aACA,kBACA,UACA,GAAG,UAEHC,oCAAkB,MAAM;CAU5B,MAAM,EACJ,aACA,oBACA,OAAO,eACP,KACA,aACA,OACA,mBACA,iBACA,eACA,cACA,eACA,cACA,mBACA,cACA,oBACA,UACA,SACA,aACEC,6BAAU;EAAE,gCA5B4B;AAC1C,OAAI,UAAW,QAAO;AAEtB,UAAOC,oDAAmB,UAAU;IAClC,OAAO;IACP,OAAO;IACP,QAAQ;IACT,CAAC;KACD,CAAC,WAAW,SAAS,CAAC;EAoBF,GAAG;EAAM,CAAC;CACjC,MAAM,+CACG;EACL;EACA;EACA,GAAG;EACJ,GACD;EAAC;EAAiB;EAAU;EAAa,CAC1C;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QACE,qFACG,cACC,2CAAC;GACC,GAAI;GACJ,QAAQ,CAAC;GACT,OAAM;aAEL;IACY,GACb,MAEH,YACA;AAGP,SAAOC,wDAAuB,eAAe;GAC3C,OAAO;GACP,QAAQ;GACT,CAAC;IACD;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,4CACG;EAAE;EAAK;EAAO;EAAoB;EAAU;EAAS;EAAU,GACtE;EAAC;EAAK;EAAoB;EAAU;EAAS;EAAU;EAAM,CAC9D;CACD,MAAM,0CAA+B;EAAE;EAAK;EAAO,GAAG,CAAC,KAAK,MAAM,CAAC;CACnE,MAAM,6CACG;EAAE;EAAmB;EAAY;EAAa,GACrD;EAAC;EAAmB;EAAY;EAAY,CAC7C;CACD,MAAM,0DAAmB,MAAM,GAAG,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC;AAErD,QACE,2CAACC;EAA2B,OAAO;YACjC,2CAACC;GAAgB,OAAO;aACtB,2CAACC;IAAc,OAAO;cACpB,2CAAC;KAAiB,OAAO;eACvB;MAAc,GAAI;;OAChB,2CAACC,uBAAO,SAAM,GAAI,eAAe,GAAI;OAErC;QACa;QACN;QACQ;QACb,GAAI,aAAa;SAAE,GAAG;SAAgB,GAAG;SAAW,CAAC;mBAErD,uFACE,2CAAC,eAAY,GAAI,cAAc,SAAS,GAAI,GAC5B,EAElB;SACQ,WAAW,aAAa;SAAU,GAAG;mBAE1C,aAAa,WACZ,2CAAC;UACC,MAAM;UACN,GAAI,kBAAkB,UAAU;WAChC,GAEF,2CAAC;UAAiB;UAAM,GAAI,aAAa,UAAU;WAAI;UAEtC;SACL;OAElB,2CAAC;QACC,+CACE,4DAAgC,aAAa,CAAC,CAC/C;kBAEA;SACa;;OACH;MACE;KACL;IACA;GACS;GAGjC,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOC,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAQF,MAAM,cAAc,YAAqC,OAAO,QAAQ,CACtE,EAAE,wBAAwB,IAAI,GAC7B,EAAE,SAAU,GAAG,YAAY;CAC1B,GAAG;CACH,UAAU,2CAAC,mBAAiB,WAA2B;CACxD,EACF;AAMD,MAAM,aAAa,YAAoC,OAAO,OAAO,CACnE,SACC,EAAE,UAAU,KAAM,GAAG,YAAY;CAChC,UAAU,QAAQ,YAAY,2CAACC,8CAAkB;CACjD,GAAG;CACJ,EACF;AAID,MAAM,kBAAkB,YACtB,QACA,YACD,EAAE;AAIH,MAAM,gBAAgB,4CAEpB,UACD,EAAE;AAIH,MAAa,cAAc,YACzB,QACA,QACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,kBAAkBC,0DAAyB;AAEnD,QAAO,cAAc,MAAM;EAC3B;AAeF,MAAa,cAAc,aACxB,EAAE,UAAU,OAAO,WAAY,GAAG,WAAW;CAC5C,MAAM,EAAE,eAAe,qBAAqB;CAC5C,MAAM,EAAE,eAAe,kBAAkBC,kDAAiB;EACxD,GAAG;EACH,GAAG;EACJ,CAAC;AAGF,QACE,2CAACC;EAAqB,iCAHO,EAAE,eAAe,GAAG,CAAC,cAAc,CAAC;YAI/D,4CAACL,uBAAO;GAAI,GAAI,eAAe;cAC5B,QAAQ,2CAAC;IAAY,GAAI;cAAa;KAAoB,GAAG,MAC7D;IACU;GACQ;GAG3B,QACD,EAAE;AAWH,MAAa,eAAe,aACzB,EAAE,UAAU,MAAM,SAAU,GAAG,WAAW;CACzC,MAAM,EAAE,aAAa,EAAE,KAAM,GAAG,gBAAgB,EAAE,KAAK,qBAAqB;CAC5E,MAAM,EAAE,mBAAmB,mBAAmBM,mCAAgB;EAC5D,GAAG;EACH,GAAG;EACJ,CAAC;AAEF,QACE,4CAACN,uBAAO;EAAI,GAAI,gBAAgB;aAC9B,2CAAC;GAAgB,GAAI,mBAAmB;aACrC,YAAY,QAAQ,2CAACO,iCAAY;IAClB,EACjB;GACU;GAGjB,SACD,EAAE;AAIH,MAAM,kBAAkB,YACtB,OACA,YACD,EAAE;AAIH,MAAa,kBAAkB,YAC7B,MACA,YACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,sBAAsB,qBAAqB;AAEnD,QAAO,kBAAkB,MAAM;EAC/B"}