@salt-ds/core 0.0.0-snapshot-20230816152726 → 0.0.0-snapshot-20230830162747

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.
Files changed (34) hide show
  1. package/dist-cjs/checkbox/Checkbox.js +0 -1
  2. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  3. package/dist-cjs/index.js +0 -4
  4. package/dist-cjs/index.js.map +1 -1
  5. package/dist-cjs/radio-button/RadioButton.js +0 -1
  6. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  7. package/dist-cjs/radio-button/RadioButtonGroup.css.js +1 -1
  8. package/dist-cjs/tooltip/Tooltip.js +53 -19
  9. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  10. package/dist-cjs/tooltip/useTooltip.js +8 -15
  11. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  12. package/dist-cjs/utils/useFloatingUI.js +2 -84
  13. package/dist-cjs/utils/useFloatingUI.js.map +1 -1
  14. package/dist-es/checkbox/Checkbox.js +0 -1
  15. package/dist-es/checkbox/Checkbox.js.map +1 -1
  16. package/dist-es/index.js +1 -1
  17. package/dist-es/radio-button/RadioButton.js +0 -1
  18. package/dist-es/radio-button/RadioButton.js.map +1 -1
  19. package/dist-es/radio-button/RadioButtonGroup.css.js +1 -1
  20. package/dist-es/tooltip/Tooltip.js +53 -19
  21. package/dist-es/tooltip/Tooltip.js.map +1 -1
  22. package/dist-es/tooltip/useTooltip.js +8 -15
  23. package/dist-es/tooltip/useTooltip.js.map +1 -1
  24. package/dist-es/utils/useFloatingUI.js +4 -82
  25. package/dist-es/utils/useFloatingUI.js.map +1 -1
  26. package/dist-types/tooltip/Tooltip.d.ts +2 -2
  27. package/dist-types/tooltip/useTooltip.d.ts +0 -7
  28. package/dist-types/utils/useFloatingUI.d.ts +1 -51
  29. package/package.json +1 -1
  30. package/dist-cjs/tooltip/TooltipBase.js +0 -62
  31. package/dist-cjs/tooltip/TooltipBase.js.map +0 -1
  32. package/dist-es/tooltip/TooltipBase.js +0 -58
  33. package/dist-es/tooltip/TooltipBase.js.map +0 -1
  34. package/dist-types/tooltip/TooltipBase.d.ts +0 -13
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup.disabled ?? formFieldDisabled ?? disabledProp;\n const readOnly = radioGroup.readOnly ?? formFieldReadOnly ?? readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n radioGroup.a11yProps?.[\"aria-describedby\"] ??\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n radioGroup.a11yProps?.[\"aria-labelledby\"] ??\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n // From ADA: read-only field doesn't need to be focusable since it's not a field but text\n tabIndex={readOnly ? -1 : undefined}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AA6D5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAjFnC,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAkFI,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,aAAa,EAAC;AAAA,MACd,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,MACf,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAW,EAAA,kBAAA;AAAA,MACX,QAAU,EAAA,iBAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAEjC,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,gBAAA;AAAA,MACpB,iBAAmB,EAAA,eAAA;AAAA,MACnB,SAAW,EAAA,cAAA;AAAA,MACX,QAAU,EAAA,aAAA;AAAA,MACP,GAAA,cAAA;AAAA,KACD,GAAA,UAAA,CAAA;AAEJ,IAAA,MAAM,QAAW,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,QAAX,KAAA,IAAA,GAAA,EAAA,GAAuB,sBAAvB,IAA4C,GAAA,EAAA,GAAA,YAAA,CAAA;AAC7D,IAAA,MAAM,QAAW,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,QAAX,KAAA,IAAA,GAAA,EAAA,GAAuB,sBAAvB,IAA4C,GAAA,EAAA,GAAA,YAAA,CAAA;AAC7D,IAAM,MAAA,gBAAA,GAAmB,CAAC,QACtB,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAW,qBAAX,IACA,GAAA,EAAA,GAAA,yBAAA,KADA,YAEA,oBACA,GAAA,KAAA,CAAA,CAAA;AAEJ,IAAM,MAAA,iBAAA,GACJ,WAAW,KAAS,IAAA,IAAA,IAAQ,SAAS,IACjC,GAAA,UAAA,CAAW,UAAU,KACrB,GAAA,WAAA,CAAA;AACN,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAW,CAAA,IAAA,CAAA;AAEpC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAI,aAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhJ1E,MAAAC,IAAAA,GAAAA,CAAAA;AAiJM,MAAI,IAAA,QAAA;AAAU,QAAA,OAAA;AAEd,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAA,CAAA,CAAA;AAChB,MAAA,CAAAA,GAAA,GAAA,UAAA,CAAW,QAAX,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,IAAA,IAAsB,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,SAC1C;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,kBAAkB,EAAA,IAAA;AAAA,YAAA,CAChB,EAAW,GAAA,CAAA,EAAA,GAAA,UAAA,CAAA,SAAA,KAAX,IAAuB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,KAAvB,YACE,kBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,kBAAA,CAAA;AAAA,YACvB,gBAAA;AAAA,WACF;AAAA,UACA,iBAAiB,EAAA,IAAA;AAAA,YAAA,CACf,EAAW,GAAA,CAAA,EAAA,GAAA,UAAA,CAAA,SAAA,KAAX,IAAuB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,iBAAA,CAAA,KAAvB,YACE,kBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,iBAAA,CAAA;AAAA,YACvB,eAAA;AAAA,WACF;AAAA,UACA,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,GAAG,cAAc,CAAA;AAAA,UAErD,QAAA,EAAU,WAAW,CAAK,CAAA,GAAA,KAAA,CAAA;AAAA,UAC1B,OAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,UACJ,GAAG,cAAA;AAAA,SACN,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n ComponentPropsWithoutRef<\"label\">,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * Set the default selected radio button in the group\n */\n checked?: boolean;\n /**\n * Set the disabled state\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * Set the error state\n */\n error?: boolean;\n /**\n * Props to be passed to the radio input\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /**\n * The label to be shown next to the radio icon\n */\n label?: ReactNode;\n /**\n * Name of the radio group\n */\n name?: string;\n /**\n * Callback for blur event\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback for change event\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback for focus event\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Set the read only state.\n */\n readOnly?: boolean;\n /**\n * Value of radio button\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * RadioButton has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled: disabledProp,\n error,\n inputProps = {},\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n readOnly: readOnlyProp,\n value,\n validationStatus: validationStatusProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-radio-button\",\n css: radioButtonCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const radioGroup = useRadioGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const disabled = radioGroup.disabled ?? formFieldDisabled ?? disabledProp;\n const readOnly = radioGroup.readOnly ?? formFieldReadOnly ?? readOnlyProp;\n const validationStatus = !disabled\n ? radioGroup.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp\n : undefined;\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n if (readOnly) return;\n\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n inputOnChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-describedby={clsx(\n radioGroup.a11yProps?.[\"aria-describedby\"] ??\n formFieldA11yProps?.[\"aria-describedby\"],\n inputDescribedBy\n )}\n aria-labelledby={clsx(\n radioGroup.a11yProps?.[\"aria-labelledby\"] ??\n formFieldA11yProps?.[\"aria-labelledby\"],\n inputLabelledBy\n )}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n {...restInputProps}\n />\n <RadioButtonIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n border: none;\n margin: 0;\n padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n display: flex;\n gap: var(--salt-spacing-100);\n flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n display: flex;\n gap: var(--salt-spacing-200);\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n display: inline-block;\n font-size: var(--formFieldLegacy-label-fontSize); /* TODO: V2 Form Field work */\n color: var(--salt-text-primary-foreground);\n margin-bottom: var(--salt-spacing-200);\n}\n";
1
+ var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n border: none;\n margin: 0;\n padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n display: flex;\n gap: var(--salt-spacing-100);\n flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n display: flex;\n gap: var(--salt-spacing-200);\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n white-space: break-spaces;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=RadioButtonGroup.css.js.map
@@ -1,17 +1,21 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef, isValidElement, cloneElement } from 'react';
4
+ import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
5
+ import { useWindow } from '@salt-ds/window';
6
+ import { useComponentCssInjection } from '@salt-ds/styles';
7
+ import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
4
8
  import { makePrefixer } from '../utils/makePrefixer.js';
5
- import { useFloatingComponent } from '../utils/useFloatingUI.js';
9
+ import '../utils/useFloatingUI.js';
6
10
  import { useForkRef } from '../utils/useForkRef.js';
7
11
  import '../utils/useId.js';
8
- import '../salt-provider/SaltProvider.js';
12
+ import { SaltProvider } from '../salt-provider/SaltProvider.js';
9
13
  import '../viewport/ViewportProvider.js';
10
14
  import { mergeProps } from '../utils/mergeProps.js';
11
15
  import { useTooltip } from './useTooltip.js';
16
+ import css_248z from './Tooltip.css.js';
12
17
  import '../form-field-context/FormFieldContext.js';
13
18
  import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
14
- import { TooltipBase } from './TooltipBase.js';
15
19
 
16
20
  const withBaseName = makePrefixer("saltTooltip");
17
21
  const Tooltip = forwardRef(
@@ -19,7 +23,7 @@ const Tooltip = forwardRef(
19
23
  const {
20
24
  children,
21
25
  className,
22
- disabled: disabledProp = false,
26
+ disabled: disabledProp,
23
27
  hideArrow = false,
24
28
  hideIcon = false,
25
29
  open: openProp,
@@ -31,12 +35,18 @@ const Tooltip = forwardRef(
31
35
  ...rest
32
36
  } = props;
33
37
  const {
38
+ a11yProps,
34
39
  disabled: formFieldDisabled,
35
40
  validationStatus: formFieldValidationStatus
36
41
  } = useFormFieldProps();
37
42
  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
38
43
  const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
39
- const { Component: FloatingComponent } = useFloatingComponent();
44
+ const targetWindow = useWindow();
45
+ useComponentCssInjection({
46
+ testId: "salt-tooltip",
47
+ css: css_248z,
48
+ window: targetWindow
49
+ });
40
50
  const hookProps = {
41
51
  open: openProp,
42
52
  placement,
@@ -50,8 +60,7 @@ const Tooltip = forwardRef(
50
60
  floating,
51
61
  reference,
52
62
  getTriggerProps,
53
- getTooltipProps,
54
- getTooltipPosition
63
+ getTooltipProps
55
64
  } = useTooltip(hookProps);
56
65
  const triggerRef = useForkRef(
57
66
  isValidElement(children) ? children.ref : null,
@@ -64,18 +73,43 @@ const Tooltip = forwardRef(
64
73
  ...mergeProps(getTriggerProps(), children.props),
65
74
  ref: triggerRef
66
75
  }),
67
- /* @__PURE__ */ jsx(FloatingComponent, {
68
- className: clsx(withBaseName(), withBaseName(status), className),
69
- open: open && !disabled,
70
- ...getTooltipProps(),
71
- ...getTooltipPosition(),
72
- ref: floatingRef,
73
- children: /* @__PURE__ */ jsx(TooltipBase, {
74
- hideIcon,
75
- status,
76
- content,
77
- hideArrow,
78
- arrowProps
76
+ open && !disabled && /* @__PURE__ */ jsx(FloatingPortal, {
77
+ children: /* @__PURE__ */ jsx(SaltProvider, {
78
+ children: /* @__PURE__ */ jsxs("div", {
79
+ className: clsx(
80
+ withBaseName(),
81
+ withBaseName(status),
82
+ className
83
+ ),
84
+ ref: floatingRef,
85
+ ...getTooltipProps(),
86
+ children: [
87
+ /* @__PURE__ */ jsxs("div", {
88
+ className: withBaseName("container"),
89
+ children: [
90
+ !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
91
+ status,
92
+ size: 1,
93
+ className: withBaseName("icon")
94
+ }),
95
+ /* @__PURE__ */ jsx("span", {
96
+ id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
97
+ className: withBaseName("content"),
98
+ children: content
99
+ })
100
+ ]
101
+ }),
102
+ !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
103
+ ...arrowProps,
104
+ className: withBaseName("arrow"),
105
+ strokeWidth: 1,
106
+ fill: "var(--salt-container-primary-background)",
107
+ stroke: "var(--tooltip-status-borderColor)",
108
+ height: 5,
109
+ width: 10
110
+ })
111
+ ]
112
+ })
79
113
  })
80
114
  })
81
115
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n const floatingRef = useForkRef<HTMLElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipProps()}\n {...getTooltipPosition()}\n ref={floatingRef}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SAAS,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,UAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AACA,IAAM,MAAA,WAAA,GAAc,UAAwB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAEzD,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAG,kBAAmB,EAAA;AAAA,UACvB,GAAK,EAAA,WAAA;AAAA,UAEL,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status = formFieldValidationStatus ?? statusProp;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}
@@ -37,8 +37,7 @@ function useTooltip(props) {
37
37
  strategy,
38
38
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
39
39
  placement,
40
- context,
41
- elements
40
+ context
42
41
  } = useFloatingUI({
43
42
  open,
44
43
  onOpenChange: handleOpenChange,
@@ -81,30 +80,24 @@ function useTooltip(props) {
81
80
  const getTooltipProps = () => {
82
81
  return getFloatingProps({
83
82
  "data-placement": placement,
84
- ref: floating
83
+ ref: floating,
84
+ style: {
85
+ top: y != null ? y : 0,
86
+ left: x != null ? x : 0,
87
+ position: strategy
88
+ }
85
89
  });
86
90
  };
87
91
  const getTriggerProps = () => getReferenceProps({
88
92
  ref: reference
89
93
  });
90
- const getTooltipPosition = () => {
91
- var _a, _b;
92
- return {
93
- top: y != null ? y : 0,
94
- left: x != null ? x : 0,
95
- position: strategy,
96
- width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
97
- height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
98
- };
99
- };
100
94
  return {
101
95
  arrowProps,
102
96
  open,
103
97
  floating,
104
98
  reference,
105
99
  getTooltipProps,
106
- getTriggerProps,
107
- getTooltipPosition
100
+ getTriggerProps
108
101
  };
109
102
  }
110
103
 
@@ -1 +1 @@
1
- {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n elements,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
1
+ {"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n style: {\n position: strategy,\n left: arrowX ?? 0,\n top: arrowY ?? 0,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["open"],"mappings":"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"}
@@ -1,74 +1,5 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { FloatingPortal, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
3
- import { forwardRef, createContext, useMemo, useContext } from 'react';
4
- import { SaltProvider } from '../salt-provider/SaltProvider.js';
1
+ import { flip, shift, limitShift, useFloating, autoUpdate } from '@floating-ui/react';
5
2
 
6
- const DefaultFloatingComponent = forwardRef((props, ref) => {
7
- const { open, disabled = false, top, left, position, ...rest } = props;
8
- const style = {
9
- top,
10
- left,
11
- position
12
- };
13
- return open && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, {
14
- children: /* @__PURE__ */ jsx(SaltProvider, {
15
- children: /* @__PURE__ */ jsx("div", {
16
- style,
17
- ...rest,
18
- ref
19
- })
20
- })
21
- }) : null;
22
- });
23
- const FloatingComponentContext = createContext({
24
- Component: DefaultFloatingComponent
25
- });
26
- if (process.env.NODE_ENV !== "production") {
27
- FloatingComponentContext.displayName = "FloatingComponentContext";
28
- }
29
- function FloatingComponentProvider(props) {
30
- const { Component, children } = props;
31
- const value = useMemo(() => ({ Component }), [Component]);
32
- return /* @__PURE__ */ jsx(FloatingComponentContext.Provider, {
33
- value,
34
- children
35
- });
36
- }
37
- function useFloatingComponent() {
38
- return useContext(FloatingComponentContext);
39
- }
40
- const defaultGetMiddleware = (defaultMiddleware) => defaultMiddleware;
41
- const defaultFloatingPlaform = {
42
- platform,
43
- middleware: defaultGetMiddleware,
44
- animationFrame: false
45
- };
46
- const FloatingPlatformContext = createContext(
47
- defaultFloatingPlaform
48
- );
49
- function FloatingPlatformProvider(props) {
50
- const {
51
- platform: platformProp,
52
- middleware,
53
- animationFrame,
54
- children
55
- } = props;
56
- const floatingPlatformContextValue = useMemo(
57
- () => ({
58
- platform: platformProp != null ? platformProp : platform,
59
- middleware: middleware != null ? middleware : defaultGetMiddleware,
60
- animationFrame: animationFrame != null ? animationFrame : false
61
- }),
62
- [platformProp, middleware, animationFrame]
63
- );
64
- return /* @__PURE__ */ jsx(FloatingPlatformContext.Provider, {
65
- value: floatingPlatformContextValue,
66
- children
67
- });
68
- }
69
- function useFloatingPlatform() {
70
- return useContext(FloatingPlatformContext);
71
- }
72
3
  const DEFAULT_FLOATING_UI_MIDDLEWARE = [
73
4
  flip(),
74
5
  shift({ limiter: limitShift() })
@@ -81,22 +12,13 @@ function useFloatingUI(props) {
81
12
  open = false,
82
13
  onOpenChange
83
14
  } = props;
84
- const {
85
- platform: contextPlaform,
86
- middleware: contextMiddleware,
87
- animationFrame
88
- } = useFloatingPlatform();
89
15
  const { reference, floating, refs, update, ...rest } = useFloating({
90
16
  placement,
91
17
  strategy,
92
- middleware: contextMiddleware(middleware),
18
+ middleware,
93
19
  open,
94
20
  onOpenChange,
95
- whileElementsMounted: (...args) => {
96
- const cleanup = autoUpdate(...args, { animationFrame });
97
- return cleanup;
98
- },
99
- platform: contextPlaform
21
+ whileElementsMounted: autoUpdate
100
22
  });
101
23
  return {
102
24
  reference,
@@ -107,5 +29,5 @@ function useFloatingUI(props) {
107
29
  };
108
30
  }
109
31
 
110
- export { DEFAULT_FLOATING_UI_MIDDLEWARE, FloatingComponentProvider, FloatingPlatformProvider, useFloatingComponent, useFloatingPlatform, useFloatingUI };
32
+ export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI };
111
33
  //# sourceMappingURL=useFloatingUI.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type {\n Middleware,\n Placement,\n Platform,\n Strategy,\n} from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n PropsWithChildren,\n Ref,\n} from \"react\";\n\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { SaltProvider } from \"../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport type FloatingComponentProps = {\n /**\n * Whether the floating component is disabled (used for determinig whether to show the component)\n */\n disabled?: boolean;\n /**\n * Whether the floating component is open (used for determinig whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n width?: number;\n height?: number;\n position: Strategy;\n};\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLElement,\n CombinedFloatingComponentProps\n>((props, ref) => {\n const { open, disabled = false, top, left, position, ...rest } = props;\n const style = {\n top,\n left,\n position,\n };\n return open && !disabled ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport type UseFloatingUIProps = {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n};\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ntype FloatingPlatformContextType = {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n};\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame ?? false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlaform,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n autoUpdate,\n flip,\n limitShift,\n shift,\n useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const { reference, floating, refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware,\n open,\n onOpenChange,\n whileElementsMounted: autoUpdate,\n });\n\n return {\n reference,\n floating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":[],"mappings":";;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAAS,WAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAA,UAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;"}
@@ -27,11 +27,11 @@ export interface TooltipProps extends Pick<UseFloatingUIProps, "open" | "onOpenC
27
27
  */
28
28
  enterDelay?: number;
29
29
  /**
30
- * Delay in milliseconds before the Tooltip is hidden.
30
+ * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.
31
31
  */
32
32
  leaveDelay?: number;
33
33
  /**
34
- * Option to not display the Tooltip. Can be used in conditional situations like text truncation.
34
+ * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.
35
35
  */
36
36
  disabled?: boolean;
37
37
  /**
@@ -53,11 +53,4 @@ export declare function useTooltip(props?: UseTooltipProps): {
53
53
  reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
54
54
  getTooltipProps: () => HTMLProps<HTMLDivElement>;
55
55
  getTriggerProps: () => Record<string, unknown>;
56
- getTooltipPosition: () => {
57
- top: number;
58
- left: number;
59
- position: import("@floating-ui/react").Strategy;
60
- width: number | undefined;
61
- height: number | undefined;
62
- };
63
56
  };
@@ -1,46 +1,11 @@
1
- import type { Middleware, Placement, Platform, Strategy } from "@floating-ui/react";
1
+ import type { Middleware, Placement, Strategy } from "@floating-ui/react";
2
2
  import { useFloating } from "@floating-ui/react";
3
- import { ReactNode } from "react";
4
- export declare type FloatingComponentProps = {
5
- /**
6
- * Whether the floating component is disabled (used for determinig whether to show the component)
7
- */
8
- disabled?: boolean;
9
- /**
10
- * Whether the floating component is open (used for determinig whether to show the component)
11
- * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
12
- * for caching windows and reusing them, rather than always spawning a new one
13
- */
14
- open: boolean;
15
- /**
16
- * Position props for the floating component
17
- */
18
- top: number;
19
- left: number;
20
- width?: number;
21
- height?: number;
22
- position: Strategy;
23
- };
24
- declare const DefaultFloatingComponent: import("react").ForwardRefExoticComponent<FloatingComponentProps & {
25
- children?: ReactNode;
26
- } & import("react").RefAttributes<HTMLElement>>;
27
- export interface FloatingComponentContextType {
28
- Component: typeof DefaultFloatingComponent;
29
- }
30
- export interface FloatingComponentProviderProps extends FloatingComponentContextType {
31
- children: ReactNode;
32
- }
33
- export declare function FloatingComponentProvider(props: FloatingComponentProviderProps): JSX.Element;
34
- export declare function useFloatingComponent(): FloatingComponentContextType;
35
3
  export declare type UseFloatingUIProps = {
36
4
  /**
37
5
  * Sets position relative to trigger.
38
6
  */
39
7
  placement?: Placement;
40
8
  strategy?: Strategy;
41
- /**
42
- * Function to update the default middleware used to extend or replace it
43
- */
44
9
  middleware?: Middleware[];
45
10
  /**
46
11
  * Sets visible state.
@@ -51,20 +16,6 @@ export declare type UseFloatingUIProps = {
51
16
  */
52
17
  onOpenChange?: (open: boolean) => void;
53
18
  };
54
- declare type GetMiddleware = (middleware: Middleware[]) => Middleware[];
55
- declare type FloatingPlatformContextType = {
56
- platform: Platform;
57
- middleware: GetMiddleware;
58
- animationFrame: boolean;
59
- };
60
- export interface FloatingPlatformProviderProps {
61
- platform?: Platform;
62
- middleware?: GetMiddleware;
63
- children: ReactNode;
64
- animationFrame?: boolean;
65
- }
66
- export declare function FloatingPlatformProvider(props: FloatingPlatformProviderProps): JSX.Element;
67
- export declare function useFloatingPlatform(): FloatingPlatformContextType;
68
19
  export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
69
20
  name: string;
70
21
  options?: any;
@@ -81,4 +32,3 @@ export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
81
32
  }) => import("@floating-ui/react").MiddlewareReturn | Promise<import("@floating-ui/react").MiddlewareReturn>;
82
33
  }[];
83
34
  export declare function useFloatingUI(props: UseFloatingUIProps): ReturnType<typeof useFloating>;
84
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/core",
3
- "version": "0.0.0-snapshot-20230816152726",
3
+ "version": "0.0.0-snapshot-20230830162747",
4
4
  "license": "Apache-2.0",
5
5
  "main": "dist-cjs/index.js",
6
6
  "sideEffects": false,
@@ -1,62 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var StatusIndicator = require('../status-indicator/StatusIndicator.js');
7
- var react = require('@floating-ui/react');
8
- require('react');
9
- var makePrefixer = require('../utils/makePrefixer.js');
10
- require('../utils/useFloatingUI.js');
11
- require('../utils/useId.js');
12
- require('../salt-provider/SaltProvider.js');
13
- require('../viewport/ViewportProvider.js');
14
- require('clsx');
15
- require('../form-field-context/FormFieldContext.js');
16
- var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
17
- var Tooltip = require('./Tooltip.css.js');
18
- var window = require('@salt-ds/window');
19
- var styles = require('@salt-ds/styles');
20
-
21
- const withBaseName = makePrefixer.makePrefixer("saltTooltip");
22
- const TooltipBase = (props) => {
23
- const targetWindow = window.useWindow();
24
- styles.useComponentCssInjection({
25
- testId: "salt-tooltip",
26
- css: Tooltip,
27
- window: targetWindow
28
- });
29
- const { a11yProps } = useFormFieldProps.useFormFieldProps();
30
- const { arrowProps, content, hideArrow, hideIcon, status } = props;
31
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
32
- children: [
33
- /* @__PURE__ */ jsxRuntime.jsxs("div", {
34
- className: withBaseName("container"),
35
- children: [
36
- !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
37
- status,
38
- size: 1,
39
- className: withBaseName("icon")
40
- }),
41
- /* @__PURE__ */ jsxRuntime.jsx("span", {
42
- id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
43
- className: withBaseName("content"),
44
- children: content
45
- })
46
- ]
47
- }),
48
- !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
49
- ...arrowProps,
50
- className: withBaseName("arrow"),
51
- strokeWidth: 1,
52
- fill: "var(--salt-container-primary-background)",
53
- stroke: "var(--tooltip-status-borderColor)",
54
- height: 5,
55
- width: 10
56
- })
57
- ]
58
- });
59
- };
60
-
61
- exports.TooltipBase = TooltipBase;
62
- //# sourceMappingURL=TooltipBase.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { FloatingArrow, FloatingArrowProps } from \"@floating-ui/react\";\nimport { TooltipProps } from \"./Tooltip\";\nimport { makePrefixer } from \"../utils\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nimport tooltipCss from \"./Tooltip.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n arrowProps: FloatingArrowProps;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tooltip\",\n css: tooltipCss,\n window: targetWindow,\n });\n\n const { a11yProps } = useFormFieldProps();\n\n const { arrowProps, content, hideArrow, hideIcon, status } = props;\n return (\n <>\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span\n id={a11yProps?.[\"aria-describedby\"]}\n className={withBaseName(\"content\")}\n >\n {content}\n </span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tooltipCss","useFormFieldProps","jsxs","Fragment","jsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,mCAAkB,EAAA,CAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,CAAA;AAC7D,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACrC,QAAA,EAAA;AAAA,UAAA,CAAC,4BACCE,cAAA,CAAAC,+BAAA,EAAA;AAAA,YACC,MAAA;AAAA,YACA,IAAM,EAAA,CAAA;AAAA,YACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,WAChC,CAAA;AAAA,0BAEDD,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,YAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAEhC,QAAA,EAAA,OAAA;AAAA,WACH,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,MACC,CAAC,6BACCA,cAAA,CAAAE,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}