80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
'use client'
|
|
|
|
// src/input-group.tsx
|
|
import { createContext } from "@chakra-ui/react-context";
|
|
import { getValidChildren } from "@chakra-ui/react-children-utils";
|
|
import {
|
|
chakra,
|
|
forwardRef,
|
|
omitThemingProps,
|
|
useMultiStyleConfig
|
|
} from "@chakra-ui/system";
|
|
import { cx } from "@chakra-ui/shared-utils";
|
|
import { compact } from "@chakra-ui/object-utils";
|
|
import { cloneElement } from "react";
|
|
import { jsx } from "react/jsx-runtime";
|
|
var [InputGroupStylesProvider, useInputGroupStyles] = createContext({
|
|
name: `InputGroupStylesContext`,
|
|
errorMessage: `useInputGroupStyles returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
|
|
});
|
|
var InputGroup = forwardRef(
|
|
function InputGroup2(props, ref) {
|
|
const styles = useMultiStyleConfig("Input", props);
|
|
const { children, className, ...rest } = omitThemingProps(props);
|
|
const _className = cx("chakra-input__group", className);
|
|
const groupStyles = {};
|
|
const validChildren = getValidChildren(children);
|
|
const input = styles.field;
|
|
validChildren.forEach((child) => {
|
|
var _a, _b;
|
|
if (!styles)
|
|
return;
|
|
if (input && child.type.id === "InputLeftElement") {
|
|
groupStyles.paddingStart = (_a = input.height) != null ? _a : input.h;
|
|
}
|
|
if (input && child.type.id === "InputRightElement") {
|
|
groupStyles.paddingEnd = (_b = input.height) != null ? _b : input.h;
|
|
}
|
|
if (child.type.id === "InputRightAddon") {
|
|
groupStyles.borderEndRadius = 0;
|
|
}
|
|
if (child.type.id === "InputLeftAddon") {
|
|
groupStyles.borderStartRadius = 0;
|
|
}
|
|
});
|
|
const clones = validChildren.map((child) => {
|
|
var _a, _b;
|
|
const theming = compact({
|
|
size: ((_a = child.props) == null ? void 0 : _a.size) || props.size,
|
|
variant: ((_b = child.props) == null ? void 0 : _b.variant) || props.variant
|
|
});
|
|
return child.type.id !== "Input" ? cloneElement(child, theming) : cloneElement(child, Object.assign(theming, groupStyles, child.props));
|
|
});
|
|
return /* @__PURE__ */ jsx(
|
|
chakra.div,
|
|
{
|
|
className: _className,
|
|
ref,
|
|
__css: {
|
|
width: "100%",
|
|
display: "flex",
|
|
position: "relative",
|
|
// Parts of inputs override z-index to ensure that they stack correctly on each other
|
|
// Create a new stacking context so that these overrides don't leak out and conflict with other z-indexes
|
|
isolation: "isolate",
|
|
...styles.group
|
|
},
|
|
"data-group": true,
|
|
...rest,
|
|
children: /* @__PURE__ */ jsx(InputGroupStylesProvider, { value: styles, children: clones })
|
|
}
|
|
);
|
|
}
|
|
);
|
|
InputGroup.displayName = "InputGroup";
|
|
|
|
export {
|
|
useInputGroupStyles,
|
|
InputGroup
|
|
};
|
|
//# sourceMappingURL=chunk-FKYN3ZGE.mjs.map
|