@vuu-ui/vuu-ui-controls 0.8.74 → 0.8.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var vuuInputCss = ".vuuInput {\n --vuu-icon-size: 16px;\n}\n\n.vuuInput-errorIcon:after {\n cursor: pointer;\n}";
3
+ var vuuInputCss = ".vuuInput {\n --vuu-icon-size: 16px;\n}\n\n.vuuInput-errorIcon:after {\n --vuu-icon-color: var(--salt-status-error-background);\n cursor: pointer;\n}\n";
4
4
 
5
5
  module.exports = vuuInputCss;
6
6
  //# sourceMappingURL=VuuInput.css.js.map
@@ -90,7 +90,7 @@ const VuuInput = React.forwardRef(function VuuInput2({
90
90
  ...props.inputProps
91
91
  },
92
92
  className: cx(classBase, className, {
93
- [`${classBase}-errror`]: errorMessage
93
+ [`${classBase}-error`]: errorMessage
94
94
  }),
95
95
  onBlur: handleBlur,
96
96
  ref: forwardedRef,
@@ -1 +1 @@
1
- {"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n errorMessage?: string;\n onCommit: Commithandler<T>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { anchorProps, tooltipProps } = useTooltip({\n id,\n tooltipContent: errorMessage,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T);\n } else {\n onCommit(evt, value as T);\n }\n },\n [onCommit, type]\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown]\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue]\n );\n\n const endAdornment = errorMessage ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-errror`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n }\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["forwardRef","VuuInput","useWindow","useComponentCssInjection","vuuInputCss","useId","useTooltip","useCallback","isValidNumber","jsx","jsxs","Fragment","Input","Tooltip"],"mappings":"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"}
1
+ {"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n errorMessage?: string;\n onCommit: Commithandler<T>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { anchorProps, tooltipProps } = useTooltip({\n id,\n tooltipContent: errorMessage,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T);\n } else {\n onCommit(evt, value as T);\n }\n },\n [onCommit, type]\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown]\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue]\n );\n\n const endAdornment = errorMessage ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n }\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["forwardRef","VuuInput","useWindow","useComponentCssInjection","vuuInputCss","useId","useTooltip","useCallback","isValidNumber","jsx","jsxs","Fragment","Input","Tooltip"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var vuuInputCss = ".vuuInput {\n --vuu-icon-size: 16px;\n}\n\n.vuuInput-errorIcon:after {\n cursor: pointer;\n}";
1
+ var vuuInputCss = ".vuuInput {\n --vuu-icon-size: 16px;\n}\n\n.vuuInput-errorIcon:after {\n --vuu-icon-color: var(--salt-status-error-background);\n cursor: pointer;\n}\n";
2
2
 
3
3
  export { vuuInputCss as default };
4
4
  //# sourceMappingURL=VuuInput.css.js.map
@@ -88,7 +88,7 @@ const VuuInput = forwardRef(function VuuInput2({
88
88
  ...props.inputProps
89
89
  },
90
90
  className: cx(classBase, className, {
91
- [`${classBase}-errror`]: errorMessage
91
+ [`${classBase}-error`]: errorMessage
92
92
  }),
93
93
  onBlur: handleBlur,
94
94
  ref: forwardedRef,
@@ -1 +1 @@
1
- {"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n errorMessage?: string;\n onCommit: Commithandler<T>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { anchorProps, tooltipProps } = useTooltip({\n id,\n tooltipContent: errorMessage,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T);\n } else {\n onCommit(evt, value as T);\n }\n },\n [onCommit, type]\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown]\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue]\n );\n\n const endAdornment = errorMessage ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-errror`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n }\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["VuuInput"],"mappings":";;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,UAAA,CAAA;AAElB,MAAM,kBAAqB,GAAA;AAAA,EACzB,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA;AAiBa,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAG1C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,YAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,UAAW,CAAA;AAAA,IAC/C,EAAA;AAAA,IACA,cAAgB,EAAA,YAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,SAAS,QAAU,EAAA;AACrB,QAAM,MAAA,YAAA,GAAe,WAAW,KAAK,CAAA,CAAA;AACrC,QAAI,IAAA,aAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,UAAA,QAAA,CAAS,KAAK,YAAiB,CAAA,CAAA;AAAA,SAC1B,MAAA;AAEL,UAAA,MAAM,MAAM,eAAe,CAAA,CAAA;AAAA,SAC7B;AAAA,OACF,MAAA,IAAW,SAAS,SAAW,EAAA;AAC7B,QAAS,QAAA,CAAA,GAAA,EAAK,OAAQ,CAAA,KAAK,CAAM,CAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAA,QAAA,CAAS,KAAK,KAAU,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,QAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,OACxB;AACA,MAAA,SAAA,GAAY,GAAG,CAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,aAAa,SAAS,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,eAAe,YACnB,mBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,MACvB,WAAU,EAAA,OAAA;AAAA,KAAA;AAAA,GAEV,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,YAAA;AAAA,QACA,EAAA;AAAA,QACA,UAAY,EAAA;AAAA,UACV,GAAG,kBAAA;AAAA,UACH,GAAG,KAAM,CAAA,UAAA;AAAA,SACX;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,YAAA;AAAA,SAC1B,CAAA;AAAA,QACD,MAAQ,EAAA,UAAA;AAAA,QACR,GAAK,EAAA,YAAA;AAAA,QACL,SAAW,EAAA,aAAA;AAAA,OAAA;AAAA,KACb;AAAA,IACC,+BAAgB,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,YAAc,EAAA,MAAA,EAAO,SAAQ,CAAK,GAAA,IAAA;AAAA,GACjE,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"VuuInput.js","sources":["../../src/vuu-input/VuuInput.tsx"],"sourcesContent":["import { Tooltip, useTooltip } from \"@vuu-ui/vuu-popups\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { isValidNumber, useId } from \"@vuu-ui/vuu-utils\";\nimport { Input, InputProps } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n SyntheticEvent,\n useCallback,\n} from \"react\";\n\nimport vuuInputCss from \"./VuuInput.css\";\n\nconst classBase = \"vuuInput\";\n\nconst constantInputProps = {\n autoComplete: \"off\",\n};\n\nexport type Commithandler<T extends VuuRowDataItemType = string> = (\n evt: SyntheticEvent<HTMLInputElement>,\n value: T\n) => void;\nexport interface VuuInputProps<T extends VuuRowDataItemType = string>\n extends InputProps {\n errorMessage?: string;\n onCommit: Commithandler<T>;\n type?: T;\n}\n\n/**\n * A variant of Salt Input that provides a commit callback prop,\n * TODO along with cancel behaviour ?\n */\nexport const VuuInput = forwardRef(function VuuInput<\n T extends VuuRowDataItemType = string\n>(\n {\n className,\n errorMessage,\n id: idProp,\n onCommit,\n onKeyDown,\n type,\n ...props\n }: VuuInputProps<T>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-input\",\n css: vuuInputCss,\n window: targetWindow,\n });\n\n const id = useId(idProp);\n const { anchorProps, tooltipProps } = useTooltip({\n id,\n tooltipContent: errorMessage,\n });\n\n const commitValue = useCallback<Commithandler<string>>(\n (evt, value) => {\n if (type === \"number\") {\n const numericValue = parseFloat(value);\n if (isValidNumber(numericValue)) {\n onCommit(evt, numericValue as T);\n } else {\n //TODO add validation logic\n throw Error(\"Invalid value\");\n }\n } else if (type === \"boolean\") {\n onCommit(evt, Boolean(value) as T);\n } else {\n onCommit(evt, value as T);\n }\n },\n [onCommit, type]\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n (evt) => {\n if (evt.key === \"Enter\") {\n evt.preventDefault();\n evt.stopPropagation();\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n }\n onKeyDown?.(evt);\n },\n [commitValue, onKeyDown]\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n commitValue(evt, value);\n },\n [commitValue]\n );\n\n const endAdornment = errorMessage ? (\n <span\n {...anchorProps}\n className={`${classBase}-errorIcon`}\n data-icon=\"error\"\n />\n ) : undefined;\n\n return (\n <>\n <Input\n {...props}\n endAdornment={endAdornment}\n id={id}\n inputProps={{\n ...constantInputProps,\n ...props.inputProps,\n }}\n className={cx(classBase, className, {\n [`${classBase}-error`]: errorMessage,\n })}\n onBlur={handleBlur}\n ref={forwardedRef}\n onKeyDown={handleKeyDown}\n />\n {tooltipProps ? <Tooltip {...tooltipProps} status=\"error\" /> : null}\n </>\n );\n}) as <T extends VuuRowDataItemType = string>(\n props: VuuInputProps<T> & {\n ref?: ForwardedRef<HTMLDivElement>;\n }\n) => ReactElement<VuuInputProps<T>>;\n"],"names":["VuuInput"],"mappings":";;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,UAAA,CAAA;AAElB,MAAM,kBAAqB,GAAA;AAAA,EACzB,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA;AAiBa,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAG1C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,YAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,QAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,UAAW,CAAA;AAAA,IAC/C,EAAA;AAAA,IACA,cAAgB,EAAA,YAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,SAAS,QAAU,EAAA;AACrB,QAAM,MAAA,YAAA,GAAe,WAAW,KAAK,CAAA,CAAA;AACrC,QAAI,IAAA,aAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,UAAA,QAAA,CAAS,KAAK,YAAiB,CAAA,CAAA;AAAA,SAC1B,MAAA;AAEL,UAAA,MAAM,MAAM,eAAe,CAAA,CAAA;AAAA,SAC7B;AAAA,OACF,MAAA,IAAW,SAAS,SAAW,EAAA;AAC7B,QAAS,QAAA,CAAA,GAAA,EAAK,OAAQ,CAAA,KAAK,CAAM,CAAA,CAAA;AAAA,OAC5B,MAAA;AACL,QAAA,QAAA,CAAS,KAAK,KAAU,CAAA,CAAA;AAAA,OAC1B;AAAA,KACF;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,QAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,OACxB;AACA,MAAA,SAAA,GAAY,GAAG,CAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,aAAa,SAAS,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,MAAA,WAAA,CAAY,KAAK,KAAK,CAAA,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,eAAe,YACnB,mBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,MACvB,WAAU,EAAA,OAAA;AAAA,KAAA;AAAA,GAEV,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,YAAA;AAAA,QACA,EAAA;AAAA,QACA,UAAY,EAAA;AAAA,UACV,GAAG,kBAAA;AAAA,UACH,GAAG,KAAM,CAAA,UAAA;AAAA,SACX;AAAA,QACA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,YAAA;AAAA,SACzB,CAAA;AAAA,QACD,MAAQ,EAAA,UAAA;AAAA,QACR,GAAK,EAAA,YAAA;AAAA,QACL,SAAW,EAAA,aAAA;AAAA,OAAA;AAAA,KACb;AAAA,IACC,+BAAgB,GAAA,CAAA,OAAA,EAAA,EAAS,GAAG,YAAc,EAAA,MAAA,EAAO,SAAQ,CAAK,GAAA,IAAA;AAAA,GACjE,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
- "version": "0.8.74",
2
+ "version": "0.8.76",
3
3
  "description": "VUU UI Controls",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
6
6
  "devDependencies": {
7
- "@vuu-ui/vuu-data-types": "0.8.74",
8
- "@vuu-ui/vuu-table-types": "0.8.74"
7
+ "@vuu-ui/vuu-data-types": "0.8.76",
8
+ "@vuu-ui/vuu-table-types": "0.8.76"
9
9
  },
10
10
  "dependencies": {
11
- "@vuu-ui/vuu-layout": "0.8.74",
12
- "@vuu-ui/vuu-popups": "0.8.74",
13
- "@vuu-ui/vuu-table": "0.8.74",
14
- "@vuu-ui/vuu-utils": "0.8.74",
11
+ "@vuu-ui/vuu-layout": "0.8.76",
12
+ "@vuu-ui/vuu-popups": "0.8.76",
13
+ "@vuu-ui/vuu-table": "0.8.76",
14
+ "@vuu-ui/vuu-utils": "0.8.76",
15
15
  "@floating-ui/react": "0.26.5",
16
16
  "@salt-ds/core": "1.27.1",
17
17
  "@salt-ds/icons": "1.9.1",