@chakra-ui/select/dist/chunk-3RSXBRAN.mjs.map

description

{"version":3,"sources":["../src/select.tsx","../../../utilities/object-utils/src/split.ts"],"sourcesContent":["import { FormControlOptions, useFormControl } from \"@chakra-ui/form-control\"\nimport {\n  chakra,\n  forwardRef,\n  layoutPropNames,\n  omitThemingProps,\n  PropsOf,\n  SystemStyleObject,\n  ThemingProps,\n  useMultiStyleConfig,\n  HTMLChakraProps,\n} from \"@chakra-ui/system\"\nimport { dataAttr } from \"@chakra-ui/shared-utils\"\nimport { split } from \"@chakra-ui/object-utils\"\nimport { cloneElement, isValidElement } from \"react\"\n\nimport { SelectField, SelectFieldProps } from \"./select-field\"\n\ninterface RootProps extends Omit<HTMLChakraProps<\"div\">, \"color\"> {}\n\ninterface SelectOptions extends FormControlOptions {\n  /**\n   * The border color when the select is focused. Use color keys in `theme.colors`\n   * @example\n   * focusBorderColor = \"blue.500\"\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the select is invalid. Use color keys in `theme.colors`\n   * @example\n   * errorBorderColor = \"red.500\"\n   */\n  errorBorderColor?: string\n  /**\n   * The placeholder for the select. We render an `<option/>` element that has\n   * empty value.\n   *\n   * ```jsx\n   * <option value=\"\">{placeholder}</option>\n   * ```\n   */\n  placeholder?: string\n  /**\n   * The size (width and height) of the icon\n   */\n  iconSize?: string\n  /**\n   * The color of the icon\n   */\n  iconColor?: string\n}\n\nexport interface SelectProps\n  extends SelectFieldProps,\n    ThemingProps<\"Select\">,\n    SelectOptions {\n  /**\n   * Props to forward to the root `div` element\n   */\n  rootProps?: RootProps\n  /**\n   * The icon element to use in the select\n   * @type React.ReactElement\n   */\n  icon?: React.ReactElement<any>\n}\n\n/**\n * React component used to select one item from a list of options.\n *\n * @see Docs https://chakra-ui.com/docs/components/select\n */\nexport const Select = forwardRef<SelectProps, \"select\">((props, ref) => {\n  const styles = useMultiStyleConfig(\"Select\", props)\n\n  const {\n    rootProps,\n    placeholder,\n    icon,\n    color,\n    height,\n    h,\n    minH,\n    minHeight,\n    iconColor,\n    iconSize,\n    ...rest\n  } = omitThemingProps(props)\n\n  const [layoutProps, otherProps] = split(rest, layoutPropNames as any[])\n\n  const ownProps = useFormControl(otherProps)\n\n  const rootStyles: SystemStyleObject = {\n    width: \"100%\",\n    height: \"fit-content\",\n    position: \"relative\",\n    color,\n  }\n\n  const fieldStyles: SystemStyleObject = {\n    paddingEnd: \"2rem\",\n    ...styles.field,\n    _focus: {\n      zIndex: \"unset\",\n      ...(styles as any).field?.[\"_focus\"],\n    },\n  }\n\n  return (\n    <chakra.div\n      className=\"chakra-select__wrapper\"\n      __css={rootStyles}\n      {...layoutProps}\n      {...rootProps}\n    >\n      <SelectField\n        ref={ref}\n        height={h ?? height}\n        minH={minH ?? minHeight}\n        placeholder={placeholder}\n        {...ownProps}\n        __css={fieldStyles}\n      >\n        {props.children}\n      </SelectField>\n\n      <SelectIcon\n        data-disabled={dataAttr(ownProps.disabled)}\n        {...((iconColor || color) && { color: iconColor || color })}\n        __css={styles.icon}\n        {...(iconSize && { fontSize: iconSize })}\n      >\n        {icon}\n      </SelectIcon>\n    </chakra.div>\n  )\n})\n\nSelect.displayName = \"Select\"\n\nexport const DefaultIcon: React.FC<PropsOf<\"svg\">> = (props) => (\n  <svg viewBox=\"0 0 24 24\" {...props}>\n    <path\n      fill=\"currentColor\"\n      d=\"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\"\n    />\n  </svg>\n)\n\nconst IconWrapper = chakra(\"div\", {\n  baseStyle: {\n    position: \"absolute\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pointerEvents: \"none\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n  },\n})\n\ninterface SelectIconProps extends HTMLChakraProps<\"div\"> {}\n\nconst SelectIcon: React.FC<SelectIconProps> = (props) => {\n  const { children = <DefaultIcon />, ...rest } = props\n\n  const clone = cloneElement(children as any, {\n    role: \"presentation\",\n    className: \"chakra-select__icon\",\n    focusable: false,\n    \"aria-hidden\": true,\n    // force icon to adhere to `IconWrapper` styles\n    style: {\n      width: \"1em\",\n      height: \"1em\",\n      color: \"currentColor\",\n    },\n  })\n\n  return (\n    <IconWrapper {...rest} className=\"chakra-select__icon-wrapper\">\n      {isValidElement(children) ? clone : null}\n    </IconWrapper>\n  )\n}\n\nSelectIcon.displayName = \"SelectIcon\"\n","export function split<T extends Record<string, any>, K extends keyof T>(\n  object: T,\n  keys: K[],\n) {\n  const picked: Record<string, any> = {}\n  const omitted: Record<string, any> = {}\n\n  for (const [key, value] of Object.entries(object)) {\n    if (keys.includes(key as T[K])) picked[key] = value\n    else omitted[key] = value\n  }\n\n  return [picked, omitted] as [\n    {\n      [P in K]: T[P]\n    },\n    Omit<T, K>,\n  ]\n}\n"],"mappings":"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","names":[]}