@devtools-ui/input 0.4.0 → 0.4.1-next.0

package/README.md

@@ -0,0 +1,102 @@
+# @devtools-ui/input
+
+## Overview
+
+`@devtools-ui/input` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
+
+It provides an `Input` component that can be used to acquire data from the user.
+
+## Installation
+
+To install `@devtools-ui/input`, you can use pnpm or yarn:
+
+```sh
+pnpm i @devtools-ui/input
+```
+
+or
+
+```sh
+yarn add @devtools-ui/input
+```
+
+## Usage
+
+You can leverage this asset through the `@devtools-ui/plugin`:
+
+```ts
+import { Input } from "@devtools-ui/plugin";
+
+// and use it to define your Player-UI content:
+myFlow = {
+  id: "my_flow",
+  views: [
+    <MyView>
+      <Input
+        size={"md"}
+        placeholder={"User input"}
+        maxLength={10}
+        binding={b`binding`}
+      >
+        <Input.Label>Label</Input.Label>
+        <Input.Note>Some note</Input.Note>
+      </Input>
+    </MyView>,
+  ],
+};
+```
+
+For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
+
+Or, your can leverage this asset in your own plugin:
+
+```ts
+// TransformPlugin.ts
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
+import { inputTransform } from "@devtools-ui/input";
+
+export class TransformsPlugin implements PlayerPlugin {
+  name = "my-plugin-transforms";
+
+  apply(player: Player) {
+    player.registerPlugin(
+      new AssetTransformPlugin([[{ type: "input" }, inputTransform]])
+    );
+  }
+}
+```
+
+```ts
+// AssetRegistryPlugin.ts
+import React from "react";
+import type { Player } from "@player-ui/player";
+import type {
+  ExtendedPlayerPlugin,
+  ReactPlayer,
+  ReactPlayerPlugin,
+} from "@player-ui/react";
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
+import { TransformsPlugin } from "./TransformPlugin";
+import { InputAsset, InputComponent } from "@devtools-ui/input";
+
+export class AssetsRegistryPlugin
+  implements ReactPlayerPlugin, ExtendedPlayerPlugin<[InputAsset]>
+{
+  name = "my-plugin";
+
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([["input", InputComponent]])
+    );
+  }
+
+  apply(player: Player) {
+    player.registerPlugin(new TransformsPlugin());
+  }
+}
+```
+
+## Contributing
+
+We welcome contributions to `@devtools-ui/input`!

package/dist/cjs/index.cjs

@@ -222,19 +222,19 @@ var InputComponent = (props) => {
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx
 var import_react5 = __toESM(require("react"));
-var import_dsl = require("@player-tools/dsl");
+var import_react_dsl = require("@player-lang/react-dsl");
 var import_text = require("@devtools-ui/text");
 var Input2 = (props) => {
   const { children, binding, ...rest } = props;
-  return /* @__PURE__ */ import_react5.default.createElement(import_dsl.Asset, { type: "input", ...rest }, /* @__PURE__ */ import_react5.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_dsl.Asset, { type: "input", ...rest }, /* @__PURE__ */ import_react5.default.createElement("property", { name: "binding" }, binding.toValue()), children);
 };
-Input2.Label = (0, import_dsl.createSlot)({
+Input2.Label = (0, import_react_dsl.createSlot)({
   name: "label",
   TextComp: import_text.Text,
   isArray: false,
   wrapInAsset: true
 });
-Input2.Note = (0, import_dsl.createSlot)({
+Input2.Note = (0, import_react_dsl.createSlot)({
   name: "note",
   TextComp: import_text.Text,
   isArray: false,

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/hooks/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React, { useState, useRef } from \"react\";\nimport {\n  Input,\n  Button,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps, useFileInputAssetProps } from \"../hooks\";\n\nconst FileInputComponent = (props: TransformedInput) => {\n  const hiddenFileInput: React.Ref<any> = useRef(null);\n\n  const [fileName, setFileName] = useState(\"\");\n\n  const handleClick = () => {\n    hiddenFileInput.current?.click();\n  };\n\n  const handleFile = (fileName: string) => {\n    setFileName(fileName);\n  };\n\n  const { id, label } = props;\n\n  const inputProps = useFileInputAssetProps({ ...props, handleFile });\n\n  return (\n    <FormControl>\n      <Button className=\"button-file\" onClick={handleClick}>\n        <FormLabel style={{ margin: 0 }}>\n          {label ? <ReactAsset {...label.asset} /> : <>Select Content</>}\n        </FormLabel>\n      </Button>\n      <Input\n        id={id}\n        name={id}\n        {...inputProps}\n        style={{ display: \"none\" }}\n        ref={hiddenFileInput}\n      />\n      {fileName ? <p>Uploaded file: {fileName}</p> : null}\n    </FormControl>\n  );\n};\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder, file } =\n    props;\n\n  const inputProps = useInputAssetProps(props);\n\n  return file ? (\n    <FileInputComponent {...props} />\n  ) : (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = useState(props.value ?? \"\");\n  const formatTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n\n/** Props for file type Input */\nexport const useFileInputAssetProps = (props: TransformedInput) => {\n  const { accept } = props;\n\n  const acceptedExtensions = accept\n    ? accept.concat(\".json\").join(\", \")\n    : \".json\";\n\n  /** Parses file content for upload into a string if file type Input */\n  const onFileUpload: React.ChangeEventHandler = (e): void => {\n    const fileList = (<HTMLInputElement>e.target).files;\n    const file = fileList ? fileList[0] : \"\";\n    const reader = new FileReader();\n\n    reader.addEventListener(\n      \"load\",\n      () => {\n        // this will set the file contents in the data model\n        props.set(reader.result as string);\n      },\n      false\n    );\n\n    if (file) {\n      reader.readAsText(file);\n      props.handleFile && props.handleFile(file.name);\n    }\n  };\n\n  return {\n    type: \"file\",\n    onChange: onFileUpload,\n    accept: acceptedExtensions,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":"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","names":["Input","import_react","fileName","React","import_react","Input","React"]}
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/hooks/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./transform\";\n","import React, { useState, useRef } from \"react\";\nimport {\n  Input,\n  Button,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps, useFileInputAssetProps } from \"../hooks\";\n\nconst FileInputComponent = (props: TransformedInput) => {\n  const hiddenFileInput: React.Ref<any> = useRef(null);\n\n  const [fileName, setFileName] = useState(\"\");\n\n  const handleClick = () => {\n    hiddenFileInput.current?.click();\n  };\n\n  const handleFile = (fileName: string) => {\n    setFileName(fileName);\n  };\n\n  const { id, label } = props;\n\n  const inputProps = useFileInputAssetProps({ ...props, handleFile });\n\n  return (\n    <FormControl>\n      <Button className=\"button-file\" onClick={handleClick}>\n        <FormLabel style={{ margin: 0 }}>\n          {label ? <ReactAsset {...label.asset} /> : <>Select Content</>}\n        </FormLabel>\n      </Button>\n      <Input\n        id={id}\n        name={id}\n        {...inputProps}\n        style={{ display: \"none\" }}\n        ref={hiddenFileInput}\n      />\n      {fileName ? <p>Uploaded file: {fileName}</p> : null}\n    </FormControl>\n  );\n};\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder, file } =\n    props;\n\n  const inputProps = useInputAssetProps(props);\n\n  return file ? (\n    <FileInputComponent {...props} />\n  ) : (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = useState(props.value ?? \"\");\n  const formatTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n\n/** Props for file type Input */\nexport const useFileInputAssetProps = (props: TransformedInput) => {\n  const { accept } = props;\n\n  const acceptedExtensions = accept\n    ? accept.concat(\".json\").join(\", \")\n    : \".json\";\n\n  /** Parses file content for upload into a string if file type Input */\n  const onFileUpload: React.ChangeEventHandler = (e): void => {\n    const fileList = (<HTMLInputElement>e.target).files;\n    const file = fileList ? fileList[0] : \"\";\n    const reader = new FileReader();\n\n    reader.addEventListener(\n      \"load\",\n      () => {\n        // this will set the file contents in the data model\n        props.set(reader.result as string);\n      },\n      false\n    );\n\n    if (file) {\n      reader.readAsText(file);\n      props.handleFile && props.handleFile(file.name);\n    }\n  };\n\n  return {\n    type: \"file\",\n    onChange: onFileUpload,\n    accept: acceptedExtensions,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-lang/react-dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAC,gBAAwC;AACxC,IAAAA,gBAOO;AAEP,IAAAA,gBAA2B;;;ACV3B,mBAAmD;AAqB5C,IAAM,YAAY,CACvB,aAA8B,CAAC,MACD;AAC9B,SAAO;AAAA,IACL,eAAe;AAAA,IACf,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,GAAG;AAAA,EACL;AACF;AAUO,IAAM,qBAAqB,CAChC,OACA,WACG;AACH,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,MAAM,SAAS,EAAE;AAC9D,QAAM,qBAAiB,qBAAmC,MAAS;AAEnE,QAAM,EAAE,aAAa,eAAe,QAAQ,OAAO,IAAI,UAAU,MAAM;AAGvE,WAAS,eAAe;AACtB,QAAI,eAAe,SAAS;AAC1B,mBAAa,eAAe,OAAO;AACnC,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF;AAGA,WAAS,mBAAmB,QAA0B;AACpD,QAAI,MAAM,OAAO;AAEjB,QAAI;AAAQ,YAAM,IAAI,UAAU,GAAG,IAAI,QAAQ,MAAM,CAAC;AAEtD,QAAI,UAAU,CAAC,IAAI,SAAS,MAAM,GAAG;AACnC,YAAM,GAAG,MAAM,GAAG,GAAG;AAAA,IACvB;AAEA,WAAO;AAAA,EACT;AAGA,WAAS,sBAAsB,GAA0C;AACvE,UAAM,SAAS,EAAE;AACjB,UAAM,QAAQ,OAAO;AACrB,UAAM,MAAM,OAAO;AACnB,UAAM,KAAK,OAAO;AAClB,UAAM,UAAU,UAAU;AAC1B,UAAM,QAAQ,QAAQ;AAEtB,QAAI,SAAS,OAAO,QAAQ,IAAI;AAC9B,QAAE,eAAe;AACjB,aAAO,kBAAkB,IAAI,MAAM,QAAQ,EAAE;AAAA,IAC/C,WACG,EAAE,QAAQ,eAAe,WACzB,EAAE,QAAQ,eAAe,WAAW,SACrC,EAAE,QAAQ,QACV;AACA,QAAE,eAAe;AACjB,aAAO,kBAAkB,OAAO,QAAQ,OAAO,MAAM;AAAA,IACvD;AAAA,EACF;AAGA,WAAS,qBAAqB,OAA2B;AACvD,QAAI,CAAC;AAAO,aAAO;AAEnB,WAAO,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM;AAAA,EACnC;AAGA,QAAM,mBAAmC,CAAC,iBAAyB;AACjE,UAAM,iBAAiB,aAAa,QAAQ,aAAa;AACzD,UAAM,WAAW,MAAM,OAAO,YAAY,KAAK;AAC/C,UAAM,oBAAoB,SAAS,QAAQ,aAAa;AAExD,SACG,mBAAmB,MAAM,mBAAmB,MAC7C,oBAAoB,GACpB;AAEA,aAAO;AAAA,QACL,UAAU,SAAS,SAAS,MAAM,IAC9B,GAAG,QAAQ,KACX,GAAG,MAAM,GAAG,QAAQ;AAAA,QACxB,mBAAmB,SAAS,SAAS,MAAM,IACvC,oBACA,oBAAoB,OAAO;AAAA,MACjC;AAAA,IACF;AAEA,WAAO;AAAA,MACL,UAAU,SAAS,SAAS,MAAM,IAC9B,GAAG,QAAQ,KACX,GAAG,MAAM,GAAG,QAAQ;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,SAAoD,CAAC,MAAM;AAC/D,iBAAa;AAEb,UAAM,aACH,SACG,EAAE,OAAO,MAAM,QAAQ,QAAQ,EAAE,IACjC,MAAM,OAAO,EAAE,OAAO,KAAK,MAAM;AAEvC,QAAI,WAAW;AACb,YAAM,IAAI,SAAS;AACnB,oBAAc,qBAAqB,SAAS,CAAC;AAAA,IAC/C,OAAO;AACL,YAAM,IAAI,EAAE;AACZ,oBAAc,EAAE;AAAA,IAClB;AAAA,EACF;AAGA,QAAM,WAAuD,CAAC,MAAM;AAClE,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B;AAGA,QAAM,YAA0D,CAAC,MAAM;AACrE,iBAAa;AAEb,QAAI;AAAQ,4BAAsB,CAAC;AAEnC,UAAM,SAAS,EAAE;AAEjB,mBAAe,UAAU,WAAW,MAAM;AACxC,YAAM,iBAAiB,OAAO;AAC9B,YAAM,eAAe,OAAO;AAG5B,UAAI,mBAAmB,aAAa,QAAQ;AAC1C;AAAA,MACF;AAEA,YAAM,MAAM,iBAAiB,YAAY;AAEzC,oBAAc,IAAI,QAAQ;AAC1B,aAAO,iBAAiB,IAAI,qBAAqB,OAAO;AACxD,aAAO,eAAe,IAAI,qBAAqB,OAAO;AAAA,IACxD,GAAG,WAAW;AAAA,EAChB;AAGA,QAAM,UAAqD,CAAC,MAAM;AAChE,UAAM,SAAS,EAAE;AACjB,UAAM,aAAa,OAAO,UAAU;AAEpC,QAAK,CAAC,cAAc,UAAY,cAAc,QAAS;AACrD,oBAAc,mBAAmB,MAAM,CAAC;AAAA,IAC1C;AAAA,EACF;AAGA,QAAM,aAAa,MAAM;AACzB,8BAAU,MAAM;AACd,kBAAc,qBAAqB,UAAU,CAAC;AAAA,EAChD,GAAG,CAAC,UAAU,CAAC;AAGf,8BAAU,MAAM,cAAc,CAAC,CAAC;AAEhC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT;AACF;AAGO,IAAM,yBAAyB,CAAC,UAA4B;AACjE,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,qBAAqB,SACvB,OAAO,OAAO,OAAO,EAAE,KAAK,IAAI,IAChC;AAGJ,QAAM,eAAyC,CAAC,MAAY;AAC1D,UAAM,WAA8B,EAAE,OAAQ;AAC9C,UAAM,OAAO,WAAW,SAAS,CAAC,IAAI;AACtC,UAAM,SAAS,IAAI,WAAW;AAE9B,WAAO;AAAA,MACL;AAAA,MACA,MAAM;AAEJ,cAAM,IAAI,OAAO,MAAgB;AAAA,MACnC;AAAA,MACA;AAAA,IACF;AAEA,QAAI,MAAM;AACR,aAAO,WAAW,IAAI;AACtB,YAAM,cAAc,MAAM,WAAW,KAAK,IAAI;AAAA,IAChD;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF;;;ADjOA,IAAM,qBAAqB,CAAC,UAA4B;AACtD,QAAM,sBAAkC,sBAAO,IAAI;AAEnD,QAAM,CAAC,UAAU,WAAW,QAAI,wBAAS,EAAE;AAE3C,QAAM,cAAc,MAAM;AACxB,oBAAgB,SAAS,MAAM;AAAA,EACjC;AAEA,QAAM,aAAa,CAACC,cAAqB;AACvC,gBAAYA,SAAQ;AAAA,EACtB;AAEA,QAAM,EAAE,IAAI,MAAM,IAAI;AAEtB,QAAM,aAAa,uBAAuB,EAAE,GAAG,OAAO,WAAW,CAAC;AAElE,SACE,8BAAAC,QAAA,cAAC,iCACC,8BAAAA,QAAA,cAAC,wBAAO,WAAU,eAAc,SAAS,eACvC,8BAAAA,QAAA,cAAC,2BAAU,OAAO,EAAE,QAAQ,EAAE,KAC3B,QAAQ,8BAAAA,QAAA,cAAC,4BAAY,GAAG,MAAM,OAAO,IAAK,8BAAAA,QAAA,4BAAAA,QAAA,gBAAE,gBAAc,CAC7D,CACF,GACA,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACL,GAAG;AAAA,MACJ,OAAO,EAAE,SAAS,OAAO;AAAA,MACzB,KAAK;AAAA;AAAA,EACP,GACC,WAAW,8BAAAA,QAAA,cAAC,WAAE,mBAAgB,QAAS,IAAO,IACjD;AAEJ;AAEO,IAAM,iBAAiB,CAAC,UAA4B;AACzD,QAAM,EAAE,YAAY,OAAO,IAAI,MAAM,MAAM,WAAW,aAAa,KAAK,IACtE;AAEF,QAAM,aAAa,mBAAmB,KAAK;AAE3C,SAAO,OACL,8BAAAA,QAAA,cAAC,sBAAoB,GAAG,OAAO,IAE/B,8BAAAA,QAAA,cAAC,6BAAY,WAAW,QAAQ,UAAU,KACvC,SACC,8BAAAA,QAAA,cAAC,2BAAU,SAAS,MAClB,8BAAAA,QAAA,cAAC,4BAAY,GAAG,MAAM,OAAO,CAC/B,GAEF,8BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACC,cAAc,8BAAAA,QAAA,cAAC,sCAAkB,WAAW,OAAQ,GACpD,QACC,8BAAAA,QAAA,cAAC,oCACC,8BAAAA,QAAA,cAAC,4BAAY,GAAG,KAAK,OAAO,CAC9B,CAEJ;AAEJ;;;AE/EA,IAAAC,gBAAkB;AAClB,uBAKO;AAEP,kBAAqB;AAEd,IAAMC,SAAQ,CACnB,UAIG;AACH,QAAM,EAAE,UAAU,SAAS,GAAG,KAAK,IAAI;AACvC,SACE,8BAAAC,QAAA,cAAC,0BAAM,MAAK,SAAS,GAAG,QACtB,8BAAAA,QAAA,cAAC,cAAS,MAAK,aAAW,QAAQ,QAAQ,CAAE,GAC3C,QACH;AAEJ;AAEAD,OAAM,YAAQ,6BAAW;AAAA,EACvB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAEDA,OAAM,WAAO,6BAAW;AAAA,EACtB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AAAA,EACT,aAAa;AACf,CAAC;;;AClCM,IAAM,iBAAkE,CAC7E,OACA,YACG;AACH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,KAAK;AACV,UAAI,MAAM,YAAY,QAAW;AAC/B,eAAO;AAAA,MACT;AAEA,aAAO,QAAQ,KAAK,OAAO,MAAM,SAAS,GAAG;AAAA,IAC/C;AAAA,IACA,IAAI,KAAK;AACP,UAAI,MAAM,YAAY,QAAW;AAC/B;AAAA,MACF;AAEA,aAAO,QAAQ,KAAK,MAAM,IAAI,CAAC,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG;AAAA,QACpD,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,IACA,OACE,MAAM,YAAY,SACd,KACA,QAAQ,KAAK,MAAM,IAAI,MAAM,SAAS;AAAA,MACpC,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb,CAAC;AAAA,IACP,YACE,MAAM,YAAY,SACd,SACA,QAAQ,YAAY,IAAI,MAAM,SAAS,EAAE,OAAO,KAAK,CAAC;AAAA,IAC5D,UACE,MAAM,YAAY,SACd,SACA,QAAQ,YAAY,KAAK,MAAM,OAAO;AAAA,EAC9C;AACF;","names":["Input","import_react","fileName","React","import_react","Input","React"]}

package/dist/index.legacy-esm.js

@@ -194,7 +194,7 @@ import React3 from "react";
 import {
   Asset,
   createSlot
-} from "@player-tools/dsl";
+} from "@player-lang/react-dsl";
 import { Text } from "@devtools-ui/text";
 var Input2 = (props) => {
   const { children, binding, ...rest } = props;

package/dist/index.mjs

@@ -194,7 +194,7 @@ import React3 from "react";
 import {
   Asset,
   createSlot
-} from "@player-tools/dsl";
+} from "@player-lang/react-dsl";
 import { Text } from "@devtools-ui/text";
 var Input2 = (props) => {
   const { children, binding, ...rest } = props;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/hooks/index.ts","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport {\n  Input,\n  Button,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps, useFileInputAssetProps } from \"../hooks\";\n\nconst FileInputComponent = (props: TransformedInput) => {\n  const hiddenFileInput: React.Ref<any> = useRef(null);\n\n  const [fileName, setFileName] = useState(\"\");\n\n  const handleClick = () => {\n    hiddenFileInput.current?.click();\n  };\n\n  const handleFile = (fileName: string) => {\n    setFileName(fileName);\n  };\n\n  const { id, label } = props;\n\n  const inputProps = useFileInputAssetProps({ ...props, handleFile });\n\n  return (\n    <FormControl>\n      <Button className=\"button-file\" onClick={handleClick}>\n        <FormLabel style={{ margin: 0 }}>\n          {label ? <ReactAsset {...label.asset} /> : <>Select Content</>}\n        </FormLabel>\n      </Button>\n      <Input\n        id={id}\n        name={id}\n        {...inputProps}\n        style={{ display: \"none\" }}\n        ref={hiddenFileInput}\n      />\n      {fileName ? <p>Uploaded file: {fileName}</p> : null}\n    </FormControl>\n  );\n};\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder, file } =\n    props;\n\n  const inputProps = useInputAssetProps(props);\n\n  return file ? (\n    <FileInputComponent {...props} />\n  ) : (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = useState(props.value ?? \"\");\n  const formatTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n\n/** Props for file type Input */\nexport const useFileInputAssetProps = (props: TransformedInput) => {\n  const { accept } = props;\n\n  const acceptedExtensions = accept\n    ? accept.concat(\".json\").join(\", \")\n    : \".json\";\n\n  /** Parses file content for upload into a string if file type Input */\n  const onFileUpload: React.ChangeEventHandler = (e): void => {\n    const fileList = (<HTMLInputElement>e.target).files;\n    const file = fileList ? fileList[0] : \"\";\n    const reader = new FileReader();\n\n    reader.addEventListener(\n      \"load\",\n      () => {\n        // this will set the file contents in the data model\n        props.set(reader.result as string);\n      },\n      false\n    );\n\n    if (file) {\n      reader.readAsText(file);\n      props.handleFile && props.handleFile(file.name);\n    }\n  };\n\n  return {\n    type: \"file\",\n    onChange: onFileUpload,\n    accept: acceptedExtensions,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":"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","names":["React","useState","useRef","useRef","useState","fileName","React","React","Input"]}
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/components/InputComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/hooks/index.ts","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/dsl/Input.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/input/src/transform/index.ts"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport {\n  Input,\n  Button,\n  FormControl,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n} from \"@chakra-ui/react\";\nimport { TransformedInput } from \"../types\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { useInputAssetProps, useFileInputAssetProps } from \"../hooks\";\n\nconst FileInputComponent = (props: TransformedInput) => {\n  const hiddenFileInput: React.Ref<any> = useRef(null);\n\n  const [fileName, setFileName] = useState(\"\");\n\n  const handleClick = () => {\n    hiddenFileInput.current?.click();\n  };\n\n  const handleFile = (fileName: string) => {\n    setFileName(fileName);\n  };\n\n  const { id, label } = props;\n\n  const inputProps = useFileInputAssetProps({ ...props, handleFile });\n\n  return (\n    <FormControl>\n      <Button className=\"button-file\" onClick={handleClick}>\n        <FormLabel style={{ margin: 0 }}>\n          {label ? <ReactAsset {...label.asset} /> : <>Select Content</>}\n        </FormLabel>\n      </Button>\n      <Input\n        id={id}\n        name={id}\n        {...inputProps}\n        style={{ display: \"none\" }}\n        ref={hiddenFileInput}\n      />\n      {fileName ? <p>Uploaded file: {fileName}</p> : null}\n    </FormControl>\n  );\n};\n\nexport const InputComponent = (props: TransformedInput) => {\n  const { validation, label, id, note, size, maxLength, placeholder, file } =\n    props;\n\n  const inputProps = useInputAssetProps(props);\n\n  return file ? (\n    <FileInputComponent {...props} />\n  ) : (\n    <FormControl isInvalid={Boolean(validation)}>\n      {label && (\n        <FormLabel htmlFor={id}>\n          <ReactAsset {...label.asset} />\n        </FormLabel>\n      )}\n      <Input\n        id={id}\n        {...inputProps}\n        size={size}\n        maxLength={maxLength}\n        placeholder={placeholder}\n      />\n      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}\n      {note && (\n        <FormHelperText>\n          <ReactAsset {...note.asset} />\n        </FormHelperText>\n      )}\n    </FormControl>\n  );\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport type { TransformedInput } from \"../types\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype KeyDownHandler = (currentValue: string, props?: TransformedInput) => any;\n\nexport interface InputHookConfig {\n  /** Time in ms to wait before formatting the user input for normal keys */\n  formatDelay?: number;\n\n  /** Symbol to be used for decimal point */\n  decimalSymbol?: string;\n\n  /** Affix to append to value - does not save to model and is only for display on input */\n  prefix?: string;\n\n  /** Affix to prepend to value - does not save to model and is only for display on input */\n  suffix?: string;\n}\n\n/** Create a valid config mixing in defaults and user overrides */\nexport const getConfig = (\n  userConfig: InputHookConfig = {}\n): Required<InputHookConfig> => {\n  return {\n    decimalSymbol: \".\",\n    formatDelay: 200,\n    prefix: \"\",\n    suffix: \"\",\n    ...userConfig,\n  };\n};\n\n/**\n * A hook to manage an input html element as an asset.\n * The hook returns an object containing props that are expected to reside on any html input.\n * It will handle formatting, setting values, beaconing, aria-labels, etc.\n *\n * @param props - The output of the input transform\n * @param config - Local config to manage user interaction overrides\n */\nexport const useInputAssetProps = (\n  props: TransformedInput,\n  config?: InputHookConfig\n) => {\n  const [localValue, setLocalValue] = useState(props.value ?? \"\");\n  const formatTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  const { formatDelay, decimalSymbol, prefix, suffix } = getConfig(config);\n\n  /** Reset and pending format timers */\n  function clearPending() {\n    if (formatTimerRef.current) {\n      clearTimeout(formatTimerRef.current);\n      formatTimerRef.current = undefined;\n    }\n  }\n\n  /** Affix handling logic on focus */\n  function handleAffixOnFocus(target: HTMLInputElement) {\n    let val = target.value;\n\n    if (suffix) val = val.substring(0, val.indexOf(suffix));\n\n    if (prefix && !val.includes(prefix)) {\n      val = `${prefix}${val}`;\n    }\n\n    return val;\n  }\n\n  /** Edge cases handling for prefix */\n  function handlePrefixEdgeCases(e: React.KeyboardEvent<HTMLInputElement>) {\n    const target = e.target as HTMLInputElement;\n    const start = target.selectionStart;\n    const end = target.selectionEnd;\n    const pl = prefix.length;\n    const atStart = start === pl;\n    const atEnd = end === pl;\n\n    if (start && end && start < pl) {\n      e.preventDefault();\n      target.setSelectionRange(pl, end - start + pl);\n    } else if (\n      (e.key === \"ArrowLeft\" && atStart) ||\n      (e.key === \"Backspace\" && atStart && atEnd) ||\n      e.key === \"Home\"\n    ) {\n      e.preventDefault();\n      target.setSelectionRange(prefix.length, prefix.length);\n    }\n  }\n\n  /** Helper to add affixes to value where appropriate  */\n  function formatValueWithAffix(value: string | undefined) {\n    if (!value) return \"\";\n\n    return `${prefix}${value}${suffix}`;\n  }\n\n  /** Value handling logic on key down */\n  const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {\n    const symbolPosition = currentValue.indexOf(decimalSymbol);\n    const newValue = props.format(currentValue) ?? \"\";\n    const newSymbolPosition = newValue.indexOf(decimalSymbol);\n\n    if (\n      (symbolPosition === -1 || symbolPosition === 0) &&\n      newSymbolPosition > 0\n    ) {\n      // formatting added dot, so set cursor before dot\n      return {\n        newValue: newValue.includes(prefix)\n          ? `${newValue}`\n          : `${prefix}${newValue}`,\n        newCursorPosition: newValue.includes(prefix)\n          ? newSymbolPosition\n          : newSymbolPosition + prefix.length,\n      };\n    }\n\n    return {\n      newValue: newValue.includes(prefix)\n        ? `${newValue}`\n        : `${prefix}${newValue}`,\n    };\n  };\n\n  /** On blur, commit the value to the model */\n  const onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    const formatted =\n      (prefix\n        ? e.target.value.replace(prefix, \"\")\n        : props.format(e.target.value)) ?? \"\";\n\n    if (formatted) {\n      props.set(formatted);\n      setLocalValue(formatValueWithAffix(formatted));\n    } else {\n      props.set(\"\");\n      setLocalValue(\"\");\n    }\n  };\n\n  /** Keep track of any user changes */\n  const onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n    setLocalValue(e.target.value);\n  };\n\n  /** Schedule a format of the current input in the future */\n  const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {\n    clearPending();\n\n    if (prefix) handlePrefixEdgeCases(e);\n\n    const target = e.target as HTMLInputElement;\n\n    formatTimerRef.current = setTimeout(() => {\n      const cursorPosition = target.selectionStart;\n      const currentValue = target.value;\n\n      /** Skip formatting if we're in the middle of the input */\n      if (cursorPosition !== currentValue.length) {\n        return;\n      }\n\n      const obj = onKeyDownHandler(currentValue);\n\n      setLocalValue(obj.newValue);\n      target.selectionStart = obj.newCursorPosition ?? target.selectionStart;\n      target.selectionEnd = obj.newCursorPosition ?? target.selectionEnd;\n    }, formatDelay);\n  };\n\n  /** Format value onFocus if affixes exist */\n  const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n    const target = e.target as HTMLInputElement;\n    const inputEmpty = target.value === \"\";\n\n    if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {\n      setLocalValue(handleAffixOnFocus(target));\n    }\n  };\n\n  // Update the stored value if data changes\n  const propsValue = props.value;\n  useEffect(() => {\n    setLocalValue(formatValueWithAffix(propsValue));\n  }, [propsValue]);\n\n  /** clear anything pending on unmount of input */\n  useEffect(() => clearPending, []);\n\n  return {\n    onBlur,\n    onChange,\n    onKeyDown,\n    onFocus,\n    value: localValue,\n  };\n};\n\n/** Props for file type Input */\nexport const useFileInputAssetProps = (props: TransformedInput) => {\n  const { accept } = props;\n\n  const acceptedExtensions = accept\n    ? accept.concat(\".json\").join(\", \")\n    : \".json\";\n\n  /** Parses file content for upload into a string if file type Input */\n  const onFileUpload: React.ChangeEventHandler = (e): void => {\n    const fileList = (<HTMLInputElement>e.target).files;\n    const file = fileList ? fileList[0] : \"\";\n    const reader = new FileReader();\n\n    reader.addEventListener(\n      \"load\",\n      () => {\n        // this will set the file contents in the data model\n        props.set(reader.result as string);\n      },\n      false\n    );\n\n    if (file) {\n      reader.readAsText(file);\n      props.handleFile && props.handleFile(file.name);\n    }\n  };\n\n  return {\n    type: \"file\",\n    onChange: onFileUpload,\n    accept: acceptedExtensions,\n  };\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n  BindingTemplateInstance,\n} from \"@player-lang/react-dsl\";\nimport { InputAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  }\n) => {\n  const { children, binding, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = createSlot({\n  name: \"label\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n\nInput.Note = createSlot({\n  name: \"note\",\n  TextComp: Text,\n  isArray: false,\n  wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { InputAsset, TransformedInput } from \"../types\";\n\nexport const inputTransform: TransformFunction<InputAsset, TransformedInput> = (\n  asset,\n  options\n) => {\n  return {\n    ...asset,\n    format(val) {\n      if (asset.binding === undefined) {\n        return val;\n      }\n\n      return options.data.format(asset.binding, val);\n    },\n    set(val) {\n      if (asset.binding === undefined) {\n        return;\n      }\n\n      return options.data.model.set([[asset.binding, val]], {\n        formatted: true,\n      });\n    },\n    value:\n      asset.binding === undefined\n        ? \"\"\n        : options.data.model.get(asset.binding, {\n            includeInvalid: true,\n            formatted: true,\n          }),\n    validation:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.get(asset.binding, { track: true }),\n    dataType:\n      asset.binding === undefined\n        ? undefined\n        : options.validation?.type(asset.binding),\n  };\n};\n"],"mappings":"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","names":["React","useState","useRef","useRef","useState","fileName","React","React","Input"]}

package/package.json

@@ -1,9 +1,15 @@
 {
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
   "name": "@devtools-ui/input",
-  "version": "0.4.0",
+  "version": "0.4.1-next.0",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@devtools-ui/text": "0.4.0",
+    "@devtools-ui/text": "0.4.1-next.0",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
@@ -15,7 +21,6 @@
   },
   "module": "dist/index.legacy-esm.js",
   "types": "types/index.d.ts",
-  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     "./dist/index.css": "./dist/index.css",
@@ -25,16 +30,11 @@
       "default": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
   "peerDependencies": {
-    "@player-tools/dsl": "0.7.0-next.3",
-    "@player-ui/types": "0.9.1-next.0",
-    "@player-ui/player": "0.9.1-next.0",
-    "@player-ui/react": "0.9.1-next.0",
-    "@player-ui/asset-transform-plugin": "0.9.1-next.0"
+    "@player-lang/react-dsl": "1.0.1",
+    "@player-ui/types": "0.15.5",
+    "@player-ui/player": "0.15.5",
+    "@player-ui/react": "0.15.5",
+    "@player-ui/asset-transform-plugin": "0.15.5"
   }
 }

package/src/dsl/Input.tsx

@@ -4,7 +4,7 @@ import {
   Asset,
   createSlot,
   BindingTemplateInstance,
-} from "@player-tools/dsl";
+} from "@player-lang/react-dsl";
 import { InputAsset } from "../types";
 import { Text } from "@devtools-ui/text";
 

package/src/dsl/__tests__/Input.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { render, binding as b } from "@player-tools/dsl";
+import { render, binding as b } from "@player-lang/react-dsl";
 import { Input } from "../Input";
 
 describe("DSL: Input", () => {

package/types/dsl/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-tools/dsl";
+import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-lang/react-dsl";
 import { InputAsset } from "../types";
 export declare const Input: {
     (props: Omit<AssetPropsWithChildren<InputAsset>, "binding"> & {

package/types/types/index.d.ts

@@ -1,8 +1,8 @@
 import type { TextAsset } from "@devtools-ui/text";
 import { Asset, Schema, AssetWrapper } from "@player-ui/types";
 import { ValidationResponse } from "@player-ui/player";
-export type InputSize = "xs" | "sm" | "md" | "lg";
-type ValueType = string | undefined;
+export declare type InputSize = "xs" | "sm" | "md" | "lg";
+declare type ValueType = string | undefined;
 export interface InputAsset extends Asset<"input"> {
     /** The location in the data-model to store the data */
     binding: ValueType;