@commercetools/nimbus 0.0.9-rc8 → 0.0.11

package/dist/chunks/multiline-text-input-CzoQb5Ms.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiline-text-input-CzoQb5Ms.cjs.js","sources":["../../src/components/multiline-text-input/multiline-text-input.recipe.tsx","../../src/components/multiline-text-input/multiline-text-input.slots.tsx","../../src/components/multiline-text-input/multiline-text-input.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\nimport { designTokens } from \"@commercetools/nimbus-tokens\";\n\n/**\n * Recipe configuration for the MultilineTextInput component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const multilineTextInputRecipe = defineRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-multiline-text-input\",\n\n  // Base styles applied to all instances of the component\n  base: {\n    display: \"block\",\n    overflowY: \"auto\",\n    borderRadius: \"200\",\n    colorPalette: \"neutral\",\n    focusVisibleRing: \"outside\",\n    bg: \"transparent\",\n    outline: \"none\",\n    boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n    resize: \"vertical\",\n    fontFamily: \"inherit\",\n    _placeholder: {\n      opacity: 0.5,\n      color: \"currentColor\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n    \"&[data-invalid='true']\": {\n      \"--border-width\": \"sizes.50\",\n      \"--border-color\": \"colors.critical.7\",\n      color: \"critical.11\",\n    },\n    \"&::-webkit-resizer\": {\n      backgroundImage: `url(\"data:image/svg+xml,${encodeURIComponent(`\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n          <mask id=\"mask0_4610_25787\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"-1\" y=\"-1\" width=\"9\" height=\"9\">\n            <rect width=\"1.03391\" height=\"4.13563\" transform=\"matrix(0.716449 0.69764 -0.716449 0.69764 6.92578 4.05362)\" fill=\"currentColor\"/>\n            <rect width=\"1.03391\" height=\"8.27125\" transform=\"matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)\" fill=\"currentColor\"/>\n          </mask>\n          <g mask=\"url(#mask0_4610_25787)\">\n            <rect width=\"8\" height=\"8\" fill=\"${designTokens.color[\"semantic-palettes\"].primary.light[9]}\"/>\n          </g>\n        </svg>\n      `)}\")`,\n      backgroundRepeat: \"no-repeat\",\n      backgroundPosition: \"center\",\n      backgroundSize: \"200 200\",\n      width: \"400\",\n      height: \"400\",\n    },\n  },\n\n  variants: {\n    size: {\n      sm: {\n        minH: 800,\n        textStyle: \"sm\",\n        px: 300,\n        py: 100,\n      },\n      md: {\n        minH: 1000,\n        textStyle: \"md\",\n        px: 400,\n        py: 200,\n      },\n    },\n\n    variant: {\n      solid: {\n        \"--border-width\": \"sizes.25\",\n        \"--border-color\": \"colors.neutral.7\",\n        backgroundColor: \"neutral.1\",\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n      ghost: {\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n","import {\n  type HTMLChakraProps,\n  type RecipeVariantProps,\n  type UnstyledProp,\n  createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\nexport interface MultilineTextInputRecipeProps\n  extends RecipeVariantProps<typeof multilineTextInputRecipe>,\n    UnstyledProp {}\n\nexport type MultilineTextInputRootSlotProps = HTMLChakraProps<\n  \"textarea\",\n  MultilineTextInputRecipeProps\n>;\n\nconst { withContext } = createRecipeContext({\n  recipe: multilineTextInputRecipe,\n});\n\n/**\n * Root component that provides the styling context for the MultilineTextInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const MultilineTextInputRootSlot = withContext<\n  HTMLTextAreaElement,\n  MultilineTextInputRootSlotProps\n>(\"textarea\");\n","import { useRef, useEffect, useCallback } from \"react\";\nimport { mergeRefs, useRecipe } from \"@chakra-ui/react\";\nimport { useObjectRef, useTextField } from \"react-aria\";\nimport { TextArea } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\n\nimport { MultilineTextInputRootSlot } from \"./multiline-text-input.slots\";\nimport type { MultilineTextInputProps } from \"./multiline-text-input.types\";\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\n/**\n * MultilineTextInput\n * ============================================================\n * A textarea component that takes in multiline text as input\n *\n * Features:\n *\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLTextAreaElement' attributes (including aria- & data-attributes)\n * - supports 'variants', 'sizes', etc. configured in the recipe\n * - allows overriding styles by using style-props\n * - supports auto-growing height based on content when `autoGrow` is enabled\n */\nexport const MultilineTextInput = (props: MultilineTextInputProps) => {\n  const { ref: forwardedRef, rows = 1, autoGrow = false, ...restProps } = props; // The default `rows` attribute for a textarea is 2, so we need to override it\n  const recipe = useRecipe({ recipe: multilineTextInputRecipe });\n\n  const localRef = useRef<HTMLTextAreaElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n  const { inputProps } = useTextField<\"textarea\">(otherProps, ref);\n\n  // Auto-grow functionality\n  const adjustHeight = useCallback(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Reset height to auto to get the correct scrollHeight\n    textarea.style.height = \"auto\";\n\n    // Calculate the new height based on content\n    const contentHeight = textarea.scrollHeight;\n\n    // Always resize to fit content (both growing and shrinking)\n    // This ensures the textarea always fits the content exactly\n    const newHeight = contentHeight;\n\n    // Apply maxHeight constraint if specified\n    const computedStyle = window.getComputedStyle(textarea);\n    const maxHeightPxValue = parseInt(computedStyle.maxHeight);\n    const finalHeight = maxHeightPxValue\n      ? Math.min(newHeight, maxHeightPxValue)\n      : newHeight;\n\n    // Set the new height\n    textarea.style.height = `${finalHeight}px`;\n  }, [autoGrow, ref]);\n\n  // Set up auto-grow behavior with event listeners\n  useEffect(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Initial adjustment\n    adjustHeight();\n\n    // Add input event listener for real-time adjustments\n    const handleInput = () => {\n      adjustHeight();\n    };\n\n    textarea.addEventListener(\"input\", handleInput);\n\n    // Cleanup\n    return () => {\n      textarea.removeEventListener(\"input\", handleInput);\n    };\n  }, [adjustHeight, autoGrow, ref]);\n\n  return (\n    <MultilineTextInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <TextArea ref={ref} rows={rows} {...inputProps} />\n    </MultilineTextInputRootSlot>\n  );\n};\n\nMultilineTextInput.displayName = \"MultilineTextInput\";\n"],"names":["multilineTextInputRecipe","defineRecipe","designTokens","withContext","createRecipeContext","MultilineTextInputRootSlot","MultilineTextInput","props","forwardedRef","rows","autoGrow","restProps","recipe","useRecipe","localRef","useRef","ref","useObjectRef","mergeRefs","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","inputProps","useTextField","adjustHeight","useCallback","textarea","newHeight","computedStyle","maxHeightPxValue","finalHeight","useEffect","handleInput","jsx","TextArea"],"mappings":"8TAOaA,EAA2BC,EAAAA,aAAa,CAEnD,UAAW,8BAGX,KAAM,CACJ,QAAS,QACT,UAAW,OACX,aAAc,MACd,aAAc,UACd,iBAAkB,UAClB,GAAI,cACJ,QAAS,OACT,UAAW,sDACX,OAAQ,WACR,WAAY,UACZ,aAAc,CACZ,QAAS,GACT,MAAO,cAAA,EAET,UAAW,CACT,WAAY,UAAA,EAEd,yBAA0B,CACxB,iBAAkB,WAClB,iBAAkB,oBAClB,MAAO,aAAA,EAET,qBAAsB,CACpB,gBAAiB,2BAA2B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+CAOtBC,EAAAA,aAAa,MAAM,mBAAmB,EAAE,QAAQ,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,OAGhG,CAAC,KACF,iBAAkB,YAClB,mBAAoB,SACpB,eAAgB,UAChB,MAAO,MACP,OAAQ,KAAA,CACV,EAGF,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACN,UAAW,KACX,GAAI,IACJ,GAAI,GAAA,EAEN,GAAI,CACF,KAAM,IACN,UAAW,KACX,GAAI,IACJ,GAAI,GAAA,CACN,EAGF,QAAS,CACP,MAAO,CACL,iBAAkB,WAClB,iBAAkB,mBAClB,gBAAiB,YACjB,OAAQ,CACN,gBAAiB,WAAA,CACnB,EAEF,MAAO,CACL,OAAQ,CACN,gBAAiB,WAAA,CACnB,CACF,CACF,EAGF,gBAAiB,CACf,KAAM,KACN,QAAS,OAAA,CAEb,CAAC,EC1EK,CAAE,YAAAC,CAAA,EAAgBC,sBAAoB,CAC1C,OAAQJ,CACV,CAAC,EAMYK,EAA6BF,EAGxC,UAAU,ECNCG,EAAsBC,GAAmC,CACpE,KAAM,CAAE,IAAKC,EAAc,KAAAC,EAAO,EAAG,SAAAC,EAAW,GAAO,GAAGC,CAAA,EAAcJ,EAClEK,EAASC,EAAAA,UAAU,CAAE,OAAQb,EAA0B,EAEvDc,EAAWC,EAAAA,OAA4B,IAAI,EAC3CC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUN,CAAY,CAAC,EAEpD,CAACW,EAAaC,CAAc,EAAIR,EAAO,kBAAkBD,CAAS,EAClE,CAACU,EAAYC,CAAU,EAAIC,EAAAA,kBAAkBH,CAAc,EAC3D,CAAE,WAAAI,CAAA,EAAeC,2CAAyBH,EAAYN,CAAG,EAGzDU,EAAeC,EAAAA,YAAY,IAAM,CACrC,MAAMC,EAAWZ,EAAI,QACrB,GAAI,CAACY,GAAY,CAAClB,EAAU,OAG5BkB,EAAS,MAAM,OAAS,OAOxB,MAAMC,EAJgBD,EAAS,aAOzBE,EAAgB,OAAO,iBAAiBF,CAAQ,EAChDG,EAAmB,SAASD,EAAc,SAAS,EACnDE,EAAcD,EAChB,KAAK,IAAIF,EAAWE,CAAgB,EACpCF,EAGJD,EAAS,MAAM,OAAS,GAAGI,CAAW,IACxC,EAAG,CAACtB,EAAUM,CAAG,CAAC,EAGlBiB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAML,EAAWZ,EAAI,QACrB,GAAI,CAACY,GAAY,CAAClB,EAAU,OAG5BgB,EAAA,EAGA,MAAMQ,EAAc,IAAM,CACxBR,EAAA,CACF,EAEA,OAAAE,EAAS,iBAAiB,QAASM,CAAW,EAGvC,IAAM,CACXN,EAAS,oBAAoB,QAASM,CAAW,CACnD,CACF,EAAG,CAACR,EAAchB,EAAUM,CAAG,CAAC,EAG9BmB,EAAAA,IAAC9B,EAAA,CAA4B,GAAGc,EAAc,GAAGE,EAAY,QAAO,GAClE,SAAAc,EAAAA,IAACC,EAAAA,0CAAA,CAAS,IAAApB,EAAU,KAAAP,EAAa,GAAGe,EAAY,EAClD,CAEJ,EAEAlB,EAAmB,YAAc"}