@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.3
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.
- package/dist-cjs/packages/lab/src/banner/Banner.css.js +1 -1
- package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/packages/lab/src/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/Swatch.css.js +1 -1
- package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js +2 -3
- package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js.map +1 -1
- package/dist-cjs/packages/lab/src/content-status/ContentStatus.css.js +1 -1
- package/dist-cjs/packages/lab/src/dialog/DialogContent.js +0 -1
- package/dist-cjs/packages/lab/src/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/packages/lab/src/dropdown/DropdownButton.css.js +1 -1
- package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/packages/lab/src/index.js +0 -2
- package/dist-cjs/packages/lab/src/index.js.map +1 -1
- package/dist-cjs/packages/lab/src/list/Highlighter.css.js +1 -1
- package/dist-cjs/packages/lab/src/list/ListItem.css.js +1 -1
- package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js +1 -5
- package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-cjs/packages/lab/src/logo/Logo.css.js +1 -1
- package/dist-cjs/packages/lab/src/metric/MetricContent.css.js +1 -1
- package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js +9 -5
- package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js.map +1 -1
- package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js +1 -1
- package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-cjs/packages/lab/src/skip-link/SkipLink.css.js +1 -1
- package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js +1 -0
- package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js.map +1 -1
- package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-cjs/packages/lab/src/toolbar/Tooltray.css.js +1 -1
- package/dist-es/packages/lab/src/banner/Banner.css.js +1 -1
- package/dist-es/packages/lab/src/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/packages/lab/src/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/Swatch.css.js +1 -1
- package/dist-es/packages/lab/src/contact-details/ContactAvatar.js +2 -3
- package/dist-es/packages/lab/src/contact-details/ContactAvatar.js.map +1 -1
- package/dist-es/packages/lab/src/content-status/ContentStatus.css.js +1 -1
- package/dist-es/packages/lab/src/dialog/DialogContent.js +0 -1
- package/dist-es/packages/lab/src/dialog/DialogContent.js.map +1 -1
- package/dist-es/packages/lab/src/dropdown/DropdownButton.css.js +1 -1
- package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/packages/lab/src/index.js +0 -1
- package/dist-es/packages/lab/src/index.js.map +1 -1
- package/dist-es/packages/lab/src/list/Highlighter.css.js +1 -1
- package/dist-es/packages/lab/src/list/ListItem.css.js +1 -1
- package/dist-es/packages/lab/src/list-deprecated/internal/scrollIntoView.js +2 -2
- package/dist-es/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-es/packages/lab/src/logo/Logo.css.js +1 -1
- package/dist-es/packages/lab/src/metric/MetricContent.css.js +1 -1
- package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js +9 -5
- package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js.map +1 -1
- package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js +1 -1
- package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-es/packages/lab/src/skip-link/SkipLink.css.js +1 -1
- package/dist-es/packages/lab/src/stepper-input/useStepperInput.js +1 -0
- package/dist-es/packages/lab/src/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-es/packages/lab/src/toolbar/Tooltray.css.js +1 -1
- package/dist-types/contact-details/ContactAvatar.d.ts +3 -4
- package/dist-types/index.d.ts +0 -1
- package/dist-types/stepper-input/useStepperInput.d.ts +1 -0
- package/package.json +4 -4
- package/dist-cjs/packages/lab/src/avatar/Avatar.css.js +0 -9
- package/dist-cjs/packages/lab/src/avatar/Avatar.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/Avatar.js +0 -62
- package/dist-cjs/packages/lab/src/avatar/Avatar.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js +0 -45
- package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/constants.js +0 -8
- package/dist-cjs/packages/lab/src/avatar/internal/constants.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js +0 -47
- package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/Avatar.css.js +0 -7
- package/dist-es/packages/lab/src/avatar/Avatar.css.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/Avatar.js +0 -58
- package/dist-es/packages/lab/src/avatar/Avatar.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/DefaultAvatar.js +0 -41
- package/dist-es/packages/lab/src/avatar/internal/DefaultAvatar.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/constants.js +0 -4
- package/dist-es/packages/lab/src/avatar/internal/constants.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/useLoaded.js +0 -43
- package/dist-es/packages/lab/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-types/avatar/Avatar.d.ts +0 -13
- package/dist-types/avatar/index.d.ts +0 -1
- package/dist-types/avatar/internal/DefaultAvatar.d.ts +0 -2
- package/dist-types/avatar/internal/constants.d.ts +0 -1
- package/dist-types/avatar/internal/useLoaded.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n INCREMENT: \"increment\" as Direction,\n DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n (...fns: any[]) =>\n (...args: any[]) =>\n fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n inputCharacter === \"\"\n );\n};\n\nconst toFloat = (inputValue: number | string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n props: StepperInputProps,\n inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n const {\n block = 10,\n decimalPlaces = 0,\n defaultValue = 0,\n liveValue,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n step = 1,\n value,\n InputProps: inputPropsProp = {},\n } = props;\n\n const [currentValue, setCurrentValue, isControlled] = useControlled({\n controlled: value,\n default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n name: \"stepper-input\",\n });\n const inputId = useId(inputPropsProp.id);\n\n const isOutOfRange = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) > max || toFloat(currentValue) < min;\n };\n\n const isAtMax = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n };\n\n const isAtMin = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n };\n\n const valuesHaveDiverged = () => {\n if (liveValue === undefined || currentValue === undefined) return false;\n return (\n toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n toFloat(currentValue)\n );\n };\n\n const { setHasAnnounced } = useDynamicAriaLabel(\n \", value out of date\",\n liveValue !== undefined,\n inputRef,\n currentValue,\n valuesHaveDiverged\n );\n\n const decrement = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const decrementBlock = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue =\n currentValue === \"\"\n ? block * -step\n : toFloat(currentValue) - step * block;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const increment = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const incrementBlock = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue =\n currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const setNextValue = (modifiedValue: number) => {\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (isNaN(toFloat(roundedValue))) return;\n\n if (!isControlled) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n useSpinner(decrementBlock, isAtMin());\n\n const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n useSpinner(decrement, isAtMin());\n\n const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n useSpinner(incrementBlock, isAtMax());\n\n const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n useSpinner(increment, isAtMax());\n\n const handleInputBlur = () => {\n if (currentValue === undefined) return;\n\n const roundedValue = toFixedDecimalPlaces(\n toFloat(currentValue),\n decimalPlaces\n );\n\n if (\n currentValue !== \"\" &&\n !isAllowedNonNumeric(currentValue) &&\n !isControlled\n ) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const handleInputFocus = () => {\n setHasAnnounced(false);\n };\n\n const handleInputChange = (event: KeyboardEvent) => {\n const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n if (!isControlled) {\n setCurrentValue(santizedInput(changedValue));\n }\n\n if (onChange) {\n onChange(santizedInput(changedValue));\n }\n };\n\n const handleInputKeyDown = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n }\n if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"PageUp\"\n ? incrementSpinnerBlock()\n : decrementSpinnerBlock();\n }\n };\n\n const handleButtonMouseDown = (\n event: MouseEvent<HTMLButtonElement>,\n type: Direction = stepperDirection.INCREMENT\n ) => {\n if (event.nativeEvent.button !== 0) return;\n type === stepperDirection.INCREMENT\n ? incrementSpinner()\n : decrementSpinner();\n };\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const refreshCurrentValue = () => {\n const refreshedcurrentValue =\n liveValue !== undefined ? liveValue : defaultValue;\n if (refreshedcurrentValue === undefined) return;\n\n setCurrentValue(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n\n inputRef.current?.focus();\n\n if (onChange) {\n onChange(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n }\n };\n\n const getButtonProps = (\n type: Direction = stepperDirection.INCREMENT,\n buttonPropsProp: ButtonProps = {}\n ) => ({\n \"aria-hidden\": true,\n tabIndex: -1,\n ...buttonPropsProp,\n onMouseDown: callAll(\n (event: MouseEvent<HTMLButtonElement>) =>\n handleButtonMouseDown(event, type),\n buttonPropsProp.onMouseDown\n ),\n onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n });\n\n const getInputProps = (\n inputProps: InputProps = {}\n ): InputProps | undefined => {\n if (currentValue === undefined) return undefined;\n return {\n ...inputProps,\n inputProps: {\n role: \"spinbutton\",\n \"aria-invalid\": isOutOfRange(),\n \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n \"aria-valuenow\": toFloat(\n toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n ),\n id: inputId,\n ...inputProps.inputProps,\n },\n onBlur: callAll(inputProps.onBlur, handleInputBlur),\n onChange: callAll(inputProps.onChange, handleInputChange),\n onFocus: callAll(inputProps.onFocus, handleInputFocus),\n onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n value: String(currentValue),\n };\n };\n\n return {\n decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n getButtonIcon,\n getButtonProps,\n getInputProps,\n incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n isAtMax,\n isAtMin,\n refreshCurrentValue,\n stepperDirection,\n valuesHaveDiverged,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n INCREMENT: \"increment\" as Direction,\n DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n (...fns: any[]) =>\n (...args: any[]) =>\n fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n if (typeof inputCharacter === \"number\") return;\n return (\n (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n inputCharacter === \"\"\n );\n};\n\nconst toFloat = (inputValue: number | string) => {\n // Plus, minus, and empty characters are treated as 0\n if (isAllowedNonNumeric(inputValue)) return 0;\n return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n props: StepperInputProps,\n inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n const {\n block = 10,\n decimalPlaces = 0,\n defaultValue = 0,\n liveValue,\n max = Number.MAX_SAFE_INTEGER,\n min = Number.MIN_SAFE_INTEGER,\n onChange,\n step = 1,\n value,\n InputProps: inputPropsProp = {},\n } = props;\n\n const [currentValue, setCurrentValue, isControlled] = useControlled({\n controlled: value,\n default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n name: \"stepper-input\",\n });\n const inputId = useId(inputPropsProp.id);\n\n const isOutOfRange = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) > max || toFloat(currentValue) < min;\n };\n\n const isAtMax = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n };\n\n const isAtMin = () => {\n if (currentValue === undefined) return true;\n return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n };\n\n const valuesHaveDiverged = () => {\n if (liveValue === undefined || currentValue === undefined) return false;\n return (\n toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n toFloat(currentValue)\n );\n };\n\n const { setHasAnnounced } = useDynamicAriaLabel(\n \", value out of date\",\n liveValue !== undefined,\n inputRef,\n currentValue,\n valuesHaveDiverged\n );\n\n const decrement = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const decrementBlock = () => {\n if (currentValue === undefined || isAtMin()) return;\n let nextValue =\n currentValue === \"\"\n ? block * -step\n : toFloat(currentValue) - step * block;\n\n // Set value to `max` if it's currently out of range\n if (max !== undefined && isOutOfRange()) nextValue = max;\n\n setNextValue(nextValue);\n };\n\n const increment = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const incrementBlock = () => {\n if (currentValue === undefined || isAtMax()) return;\n let nextValue =\n currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n // Set value to `min` if it's currently out of range\n if (min !== undefined && isOutOfRange()) nextValue = min;\n\n setNextValue(nextValue);\n };\n\n const setNextValue = (modifiedValue: number) => {\n let nextValue = modifiedValue;\n if (nextValue < min) nextValue = min;\n if (nextValue > max) nextValue = max;\n\n const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n if (isNaN(toFloat(roundedValue))) return;\n\n if (!isControlled) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n useSpinner(decrementBlock, isAtMin());\n\n const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n useSpinner(decrement, isAtMin());\n\n const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n useSpinner(incrementBlock, isAtMax());\n\n const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n useSpinner(increment, isAtMax());\n\n const handleInputBlur = () => {\n if (currentValue === undefined) return;\n\n const roundedValue = toFixedDecimalPlaces(\n toFloat(currentValue),\n decimalPlaces\n );\n\n if (\n currentValue !== \"\" &&\n !isAllowedNonNumeric(currentValue) &&\n !isControlled\n ) {\n setCurrentValue(roundedValue);\n }\n\n if (onChange) {\n onChange(roundedValue);\n }\n };\n\n const handleInputFocus = () => {\n setHasAnnounced(false);\n };\n\n const handleInputChange = (event: KeyboardEvent) => {\n const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n if (!isControlled) {\n setCurrentValue(santizedInput(changedValue));\n }\n\n if (onChange) {\n onChange(santizedInput(changedValue));\n }\n };\n\n const handleInputKeyDown = (event: KeyboardEvent) => {\n if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n }\n if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n event.preventDefault();\n event.key === \"PageUp\"\n ? incrementSpinnerBlock()\n : decrementSpinnerBlock();\n }\n };\n\n const handleButtonMouseDown = (\n event: MouseEvent<HTMLButtonElement>,\n type: Direction = stepperDirection.INCREMENT\n ) => {\n if (event.nativeEvent.button !== 0) return;\n type === stepperDirection.INCREMENT\n ? incrementSpinner()\n : decrementSpinner();\n };\n\n const handleButtonMouseUp = () => inputRef.current?.focus();\n\n const refreshCurrentValue = () => {\n const refreshedcurrentValue =\n liveValue !== undefined ? liveValue : defaultValue;\n if (refreshedcurrentValue === undefined) return;\n\n setCurrentValue(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n\n inputRef.current?.focus();\n\n if (onChange) {\n onChange(\n toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n );\n }\n };\n\n const getButtonProps = (\n type: Direction = stepperDirection.INCREMENT,\n buttonPropsProp: ButtonProps = {}\n ) => ({\n \"aria-hidden\": true,\n \"data-testid\": `${type}-button`,\n tabIndex: -1,\n ...buttonPropsProp,\n onMouseDown: callAll(\n (event: MouseEvent<HTMLButtonElement>) =>\n handleButtonMouseDown(event, type),\n buttonPropsProp.onMouseDown\n ),\n onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n });\n\n const getInputProps = (\n inputProps: InputProps = {}\n ): InputProps | undefined => {\n if (currentValue === undefined) return undefined;\n return {\n ...inputProps,\n inputProps: {\n role: \"spinbutton\",\n \"aria-invalid\": isOutOfRange(),\n \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n \"aria-valuenow\": toFloat(\n toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n ),\n id: inputId,\n ...inputProps.inputProps,\n },\n onBlur: callAll(inputProps.onBlur, handleInputBlur),\n onChange: callAll(inputProps.onChange, handleInputChange),\n onFocus: callAll(inputProps.onFocus, handleInputFocus),\n onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n value: String(currentValue),\n };\n };\n\n return {\n decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n getButtonIcon,\n getButtonProps,\n getInputProps,\n incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n isAtMax,\n isAtMin,\n refreshCurrentValue,\n stepperDirection,\n valuesHaveDiverged,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: none;\n --tabs-tabstrip-display: inline-flex;\n --tabs-tabstrip-background: transparent;\n\n align-items: flex-start;\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n position: relative;\n overflow: hidden;\n display: flex;\n min-width: 28px;\n width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n --tabs-activationIndicator-borderStyle: none none solid none;\n --tabs-activationIndicator-height: 1px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n --tabs-activationIndicator-transitionProperty: left;\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n --tabs-activationIndicator-transition: top 0.3s ease;\n --tabs-activationIndicator-borderStyle: none solid none none;\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-transitionProperty: top;\n --tabs-activationIndicator-width: 1px;\n --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n --tabs-activationIndicator-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n --tabs-tabstrip-display: flex;\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n order: 99;\n visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-
|
|
3
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: none;\n --tabs-tabstrip-display: inline-flex;\n --tabs-tabstrip-background: transparent;\n\n align-items: flex-start;\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n position: relative;\n overflow: hidden;\n display: flex;\n min-width: 28px;\n width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n --tabs-activationIndicator-borderStyle: none none solid none;\n --tabs-activationIndicator-height: 1px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n --tabs-activationIndicator-transitionProperty: left;\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n --tabs-activationIndicator-transition: top 0.3s ease;\n --tabs-activationIndicator-borderStyle: none solid none none;\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-transitionProperty: top;\n --tabs-activationIndicator-width: 1px;\n --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n --tabs-activationIndicator-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n --tabs-tabstrip-display: flex;\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n order: 99;\n visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltTooltray {\n --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n background: inherit;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n overflow: hidden;\n align-items: flex-start;\n justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex-shrink: 0;\n flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n align-items: center;\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n gap: 0 !important;\n justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n margin-top: var(--salt-size-unit);\n margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n margin-left: var(--salt-size-unit);\n padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n content: \"\";\n position: absolute;\n background:
|
|
3
|
+
var css_248z = ".saltTooltray {\n --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n background: inherit;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n overflow: hidden;\n align-items: flex-start;\n justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex-shrink: 0;\n flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n align-items: center;\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n gap: 0 !important;\n justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n margin-top: var(--salt-size-unit);\n margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n margin-left: var(--salt-size-unit);\n padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n content: \"\";\n position: absolute;\n background: var(--salt-separable-primary-borderColor);\n top: 8px;\n left: 0;\n width: 1px;\n height: 28px;\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex: 0 0 auto;\n}\n\n.saltTooltray > .Responsive-inner > *[data-pad-start=\"true\"] {\n margin-left: auto;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"] {\n flex-shrink: 0;\n}\n.saltTooltray[data-collapsible=\"dynamic\"] > .Responsive-inner {\n flex-wrap: wrap;\n}\n.saltTooltray[data-collapsing=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsed=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n flex-basis: 0;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { AvatarProps } from "
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
export declare const ContactAvatar: import("react").ForwardRefExoticComponent<ContactAvatarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
2
|
+
import { AvatarProps } from "@salt-ds/core";
|
|
3
|
+
export declare type ContactAvatarProps = AvatarProps;
|
|
4
|
+
export declare const ContactAvatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/dist-types/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ export type { ListChangeHandler as ListChangeHandlerDeprecated, ListSelectHandle
|
|
|
3
3
|
export { ListItemBase as ListItemBaseDeprecated, useListItem as useListItemDeprecated, } from "./list-deprecated";
|
|
4
4
|
export * from "./accordion";
|
|
5
5
|
export * from "./app-header";
|
|
6
|
-
export * from "./avatar";
|
|
7
6
|
export * from "./badge";
|
|
8
7
|
export * from "./banner";
|
|
9
8
|
export * from "./breadcrumbs";
|
|
@@ -280,6 +280,7 @@ export declare const useStepperInput: (props: StepperInputProps, inputRef: Mutab
|
|
|
280
280
|
formNoValidate?: boolean | undefined;
|
|
281
281
|
formTarget?: string | undefined;
|
|
282
282
|
value?: string | number | readonly string[] | undefined;
|
|
283
|
+
"data-testid": string;
|
|
283
284
|
};
|
|
284
285
|
getInputProps: (inputProps?: InputProps) => InputProps | undefined;
|
|
285
286
|
incrementButtonDown: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/lab",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.3",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "dist-cjs/packages/lab/src/index.js",
|
|
6
6
|
"sideEffects": [
|
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
"module": "dist-es/packages/lab/src/index.js",
|
|
24
24
|
"typings": "dist-types/index.d.ts",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@salt-ds/core": "1.
|
|
26
|
+
"@salt-ds/core": "1.3.0",
|
|
27
27
|
"clsx": "^1.2.1",
|
|
28
28
|
"react-window": "^1.8.6",
|
|
29
|
-
"compute-scroll-into-view": "^
|
|
30
|
-
"@floating-ui/react": "^0.
|
|
29
|
+
"compute-scroll-into-view": "^3.0.0",
|
|
30
|
+
"@floating-ui/react": "^0.20.0",
|
|
31
31
|
"@salt-ds/icons": "1.1.0",
|
|
32
32
|
"@internationalized/date": "^3.0.0",
|
|
33
33
|
"tinycolor2": "^1.4.2",
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
|
-
|
|
5
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-background: var(--saltAvatar-background, var(--salt-accent-background));\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n background: var(--avatar-background);\n color: var(--avatar-foreground);\n font-size: var(--avatar-fontSize);\n line-height: var(--avatar-container-size);\n width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n letter-spacing: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n flex-shrink: 0;\n user-select: none;\n border-radius: 50%;\n}\n\n/* Style applied to the image element */\n.saltAvatar-image {\n width: 100%;\n height: 100%;\n text-align: center;\n object-fit: cover;\n color: transparent;\n text-indent: 10000px;\n}\n\n/* Style applied to the svg element */\n.saltAvatar > svg {\n width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n}\n\n.saltAvatar-svgDisc {\n fill: var(--avatar-background);\n}\n\n.saltAvatar-svgHead {\n fill: var(--avatar-foreground);\n}\n\n/* Style applied when size is small */\n.saltAvatar-small {\n --avatar-fontSize: 8px;\n --avatar-container-size: var(--salt-size-graphic-small);\n}\n\n/* Style applied when size is medium */\n.saltAvatar-medium {\n --avatar-fontSize: 11px;\n --avatar-container-size: var(--salt-size-graphic-medium);\n}\n\n/* Style applied when size is large */\n.saltAvatar-large {\n --avatar-fontSize: 14px;\n --avatar-container-size: var(--salt-size-graphic-large);\n}\n";
|
|
6
|
-
styleInject_es(css_248z);
|
|
7
|
-
|
|
8
|
-
module.exports = css_248z;
|
|
9
|
-
//# sourceMappingURL=Avatar.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -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 core = require('@salt-ds/core');
|
|
7
|
-
var clsx = require('clsx');
|
|
8
|
-
var React = require('react');
|
|
9
|
-
var constants = require('./internal/constants.js');
|
|
10
|
-
var DefaultAvatar = require('./internal/DefaultAvatar.js');
|
|
11
|
-
var useLoaded = require('./internal/useLoaded.js');
|
|
12
|
-
require('./Avatar.css.js');
|
|
13
|
-
|
|
14
|
-
const withBaseName = core.makePrefixer(constants.classBase);
|
|
15
|
-
const Avatar = React.forwardRef(function Avatar2({
|
|
16
|
-
alt = "",
|
|
17
|
-
className,
|
|
18
|
-
children: childrenProp,
|
|
19
|
-
id: idProp,
|
|
20
|
-
size = "medium",
|
|
21
|
-
src,
|
|
22
|
-
srcSet,
|
|
23
|
-
title = "user",
|
|
24
|
-
imgProps,
|
|
25
|
-
sizes,
|
|
26
|
-
...rest
|
|
27
|
-
}, ref) {
|
|
28
|
-
let children;
|
|
29
|
-
const id = core.useId(idProp);
|
|
30
|
-
const loaded = useLoaded.useLoaded({ ...imgProps, src, srcSet });
|
|
31
|
-
const hasImg = src || srcSet;
|
|
32
|
-
const hasImgNotFailing = hasImg && loaded !== "error";
|
|
33
|
-
if (hasImgNotFailing) {
|
|
34
|
-
children = /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
35
|
-
className: withBaseName("image"),
|
|
36
|
-
alt,
|
|
37
|
-
src,
|
|
38
|
-
srcSet,
|
|
39
|
-
sizes,
|
|
40
|
-
...imgProps
|
|
41
|
-
});
|
|
42
|
-
} else if (childrenProp != null) {
|
|
43
|
-
children = childrenProp;
|
|
44
|
-
} else if (hasImg && alt) {
|
|
45
|
-
children = alt[0];
|
|
46
|
-
} else {
|
|
47
|
-
children = /* @__PURE__ */ jsxRuntime.jsx(DefaultAvatar.DefaultAvatar, {
|
|
48
|
-
id,
|
|
49
|
-
title,
|
|
50
|
-
...rest
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
54
|
-
ref,
|
|
55
|
-
className: clsx.clsx(withBaseName(), withBaseName(size), className),
|
|
56
|
-
...rest,
|
|
57
|
-
children
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
exports.Avatar = Avatar;
|
|
62
|
-
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport { classBase } from \"./internal/constants\";\nimport { DefaultAvatar } from \"./internal/DefaultAvatar\";\nimport { useLoaded } from \"./internal/useLoaded\";\n\nimport \"./Avatar.css\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n alt?: string;\n id?: string;\n imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n size?: \"small\" | \"medium\" | \"large\";\n sizes?: string;\n src?: string;\n srcSet?: string;\n title?: string;\n}\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n alt = \"\",\n className,\n children: childrenProp,\n id: idProp,\n size = \"medium\",\n src,\n srcSet,\n title = \"user\",\n imgProps,\n sizes,\n ...rest\n },\n ref\n) {\n let children;\n const id = useId(idProp);\n\n const loaded = useLoaded({ ...imgProps, src, srcSet });\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && loaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n className={withBaseName(\"image\")}\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n children = alt[0];\n } else {\n children = <DefaultAvatar id={id} title={title} {...rest} />;\n }\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), withBaseName(size), className)}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","classBase","forwardRef","Avatar","useId","useLoaded","jsx","DefaultAvatar","clsx"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAaC,mBAAS,CAAA,CAAA;AAE9B,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,EAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AACJ,EAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,SAASC,mBAAU,CAAA,EAAE,GAAG,QAAU,EAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AACrD,EAAA,MAAM,SAAS,GAAO,IAAA,MAAA,CAAA;AACtB,EAAM,MAAA,gBAAA,GAAmB,UAAU,MAAW,KAAA,OAAA,CAAA;AAE9C,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb,MAAA,IAAW,UAAU,GAAK,EAAA;AACxB,IAAA,QAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,GACV,MAAA;AACL,IAAA,QAAA,mBAAYA,cAAA,CAAAC,2BAAA,EAAA;AAAA,MAAc,EAAA;AAAA,MAAQ,KAAA;AAAA,MAAe,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,IAC5D,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var constants = require('./constants.js');
|
|
8
|
-
|
|
9
|
-
const withBaseName = core.makePrefixer(constants.classBase);
|
|
10
|
-
function DefaultAvatar({ id, title }) {
|
|
11
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
|
|
12
|
-
"aria-labelledby": id,
|
|
13
|
-
height: "64px",
|
|
14
|
-
role: "img",
|
|
15
|
-
viewBox: "0 0 64 64",
|
|
16
|
-
width: "64px",
|
|
17
|
-
children: [
|
|
18
|
-
/* @__PURE__ */ jsxRuntime.jsx("title", {
|
|
19
|
-
id,
|
|
20
|
-
children: title
|
|
21
|
-
}),
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("g", {
|
|
23
|
-
className: withBaseName("svgRoot"),
|
|
24
|
-
fill: "none",
|
|
25
|
-
fillRule: "evenodd",
|
|
26
|
-
stroke: "none",
|
|
27
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("g", {
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
30
|
-
className: withBaseName("svgDisc"),
|
|
31
|
-
d: "M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z"
|
|
32
|
-
}),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("path", {
|
|
34
|
-
className: withBaseName("svgHead"),
|
|
35
|
-
d: "M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462"
|
|
36
|
-
})
|
|
37
|
-
]
|
|
38
|
-
})
|
|
39
|
-
})
|
|
40
|
-
]
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
exports.DefaultAvatar = DefaultAvatar;
|
|
45
|
-
//# sourceMappingURL=DefaultAvatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultAvatar.js","sources":["../src/avatar/internal/DefaultAvatar.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { classBase } from \"./constants\";\n\nconst withBaseName = makePrefixer(classBase);\n\nexport function DefaultAvatar({ id, title }: HTMLAttributes<HTMLElement>) {\n return (\n <svg\n aria-labelledby={id}\n height=\"64px\"\n role=\"img\"\n viewBox=\"0 0 64 64\"\n width=\"64px\"\n >\n <title id={id}>{title}</title>\n <g\n className={withBaseName(\"svgRoot\")}\n fill=\"none\"\n fillRule=\"evenodd\"\n stroke=\"none\"\n >\n <g>\n <path\n className={withBaseName(\"svgDisc\")}\n d=\"M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z\"\n />\n <path\n className={withBaseName(\"svgHead\")}\n d=\"M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462\"\n />\n </g>\n </g>\n </svg>\n );\n}\n"],"names":["makePrefixer","classBase","jsxs","jsx"],"mappings":";;;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAaC,mBAAS,CAAA,CAAA;AAEpC,SAAS,aAAc,CAAA,EAAE,EAAI,EAAA,KAAA,EAAsC,EAAA;AACxE,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,iBAAiB,EAAA,EAAA;AAAA,IACjB,MAAO,EAAA,MAAA;AAAA,IACP,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,MAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,OAAA,EAAA;AAAA,QAAM,EAAA;AAAA,QAAS,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,sBACrBA,cAAA,CAAA,GAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACjC,IAAK,EAAA,MAAA;AAAA,QACL,QAAS,EAAA,SAAA;AAAA,QACT,MAAO,EAAA,MAAA;AAAA,QAEP,QAAC,kBAAAD,eAAA,CAAA,GAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,+IAAA;AAAA,aACJ,CAAA;AAAA,4BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,o+CAAA;AAAA,aACJ,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../src/avatar/internal/constants.ts"],"sourcesContent":["export const classBase = \"saltAvatar\";\n"],"names":[],"mappings":";;;;AAAO,MAAM,SAAY,GAAA;;;;"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function useLoaded({
|
|
8
|
-
crossOrigin,
|
|
9
|
-
referrerPolicy,
|
|
10
|
-
src,
|
|
11
|
-
srcSet
|
|
12
|
-
}) {
|
|
13
|
-
const [loaded, setLoaded] = React.useState(false);
|
|
14
|
-
React.useEffect(() => {
|
|
15
|
-
if (!src && !srcSet) {
|
|
16
|
-
return void 0;
|
|
17
|
-
}
|
|
18
|
-
setLoaded(false);
|
|
19
|
-
let active = true;
|
|
20
|
-
const image = new Image();
|
|
21
|
-
image.onload = () => {
|
|
22
|
-
if (!active) {
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
setLoaded("loaded");
|
|
26
|
-
};
|
|
27
|
-
image.onerror = () => {
|
|
28
|
-
if (!active) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
setLoaded("error");
|
|
32
|
-
};
|
|
33
|
-
image.crossOrigin = crossOrigin;
|
|
34
|
-
image.referrerPolicy = referrerPolicy;
|
|
35
|
-
image.src = src;
|
|
36
|
-
if (srcSet) {
|
|
37
|
-
image.srcset = srcSet;
|
|
38
|
-
}
|
|
39
|
-
return () => {
|
|
40
|
-
active = false;
|
|
41
|
-
};
|
|
42
|
-
}, [crossOrigin, referrerPolicy, src, srcSet]);
|
|
43
|
-
return loaded;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
exports.useLoaded = useLoaded;
|
|
47
|
-
//# sourceMappingURL=useLoaded.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLoaded.js","sources":["../src/avatar/internal/useLoaded.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\n\nexport function useLoaded({\n crossOrigin,\n referrerPolicy,\n src,\n srcSet,\n}: ImgHTMLAttributes<HTMLImageElement>) {\n const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n useEffect(() => {\n if (!src && !srcSet) {\n return undefined;\n }\n\n setLoaded(false);\n\n let active = true;\n const image = new Image();\n image.onload = () => {\n if (!active) {\n return;\n }\n setLoaded(\"loaded\");\n };\n image.onerror = () => {\n if (!active) {\n return;\n }\n setLoaded(\"error\");\n };\n image.crossOrigin = crossOrigin as HTMLImageElement[\"crossOrigin\"];\n image.referrerPolicy = referrerPolicy as HTMLImageElement[\"referrerPolicy\"];\n image.src = src as HTMLImageElement[\"src\"];\n if (srcSet) {\n image.srcset = srcSet;\n }\n\n return () => {\n active = false;\n };\n }, [crossOrigin, referrerPolicy, src, srcSet]);\n\n return loaded;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;;;AAEO,SAAS,SAAU,CAAA;AAAA,EACxB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AACF,CAAwC,EAAA;AACtC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAqC,KAAK,CAAA,CAAA;AAEtE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,GAAO,IAAA,CAAC,MAAQ,EAAA;AACnB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,SAAS,MAAM;AACnB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAAA,KACpB,CAAA;AACA,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AACA,IAAA,KAAA,CAAM,WAAc,GAAA,WAAA,CAAA;AACpB,IAAA,KAAA,CAAM,cAAiB,GAAA,cAAA,CAAA;AACvB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,KAAA,CAAM,MAAS,GAAA,MAAA,CAAA;AAAA,KACjB;AAEA,IAAA,OAAO,MAAM;AACX,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,KACC,CAAC,WAAA,EAAa,cAAgB,EAAA,GAAA,EAAK,MAAM,CAAC,CAAA,CAAA;AAE7C,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
|
-
|
|
3
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-background: var(--saltAvatar-background, var(--salt-accent-background));\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n background: var(--avatar-background);\n color: var(--avatar-foreground);\n font-size: var(--avatar-fontSize);\n line-height: var(--avatar-container-size);\n width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n letter-spacing: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n flex-shrink: 0;\n user-select: none;\n border-radius: 50%;\n}\n\n/* Style applied to the image element */\n.saltAvatar-image {\n width: 100%;\n height: 100%;\n text-align: center;\n object-fit: cover;\n color: transparent;\n text-indent: 10000px;\n}\n\n/* Style applied to the svg element */\n.saltAvatar > svg {\n width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n}\n\n.saltAvatar-svgDisc {\n fill: var(--avatar-background);\n}\n\n.saltAvatar-svgHead {\n fill: var(--avatar-foreground);\n}\n\n/* Style applied when size is small */\n.saltAvatar-small {\n --avatar-fontSize: 8px;\n --avatar-container-size: var(--salt-size-graphic-small);\n}\n\n/* Style applied when size is medium */\n.saltAvatar-medium {\n --avatar-fontSize: 11px;\n --avatar-container-size: var(--salt-size-graphic-medium);\n}\n\n/* Style applied when size is large */\n.saltAvatar-large {\n --avatar-fontSize: 14px;\n --avatar-container-size: var(--salt-size-graphic-large);\n}\n";
|
|
4
|
-
styleInject(css_248z);
|
|
5
|
-
|
|
6
|
-
export { css_248z as default };
|
|
7
|
-
//# sourceMappingURL=Avatar.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useId } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef } from 'react';
|
|
5
|
-
import { classBase } from './internal/constants.js';
|
|
6
|
-
import { DefaultAvatar } from './internal/DefaultAvatar.js';
|
|
7
|
-
import { useLoaded } from './internal/useLoaded.js';
|
|
8
|
-
import './Avatar.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer(classBase);
|
|
11
|
-
const Avatar = forwardRef(function Avatar2({
|
|
12
|
-
alt = "",
|
|
13
|
-
className,
|
|
14
|
-
children: childrenProp,
|
|
15
|
-
id: idProp,
|
|
16
|
-
size = "medium",
|
|
17
|
-
src,
|
|
18
|
-
srcSet,
|
|
19
|
-
title = "user",
|
|
20
|
-
imgProps,
|
|
21
|
-
sizes,
|
|
22
|
-
...rest
|
|
23
|
-
}, ref) {
|
|
24
|
-
let children;
|
|
25
|
-
const id = useId(idProp);
|
|
26
|
-
const loaded = useLoaded({ ...imgProps, src, srcSet });
|
|
27
|
-
const hasImg = src || srcSet;
|
|
28
|
-
const hasImgNotFailing = hasImg && loaded !== "error";
|
|
29
|
-
if (hasImgNotFailing) {
|
|
30
|
-
children = /* @__PURE__ */ jsx("img", {
|
|
31
|
-
className: withBaseName("image"),
|
|
32
|
-
alt,
|
|
33
|
-
src,
|
|
34
|
-
srcSet,
|
|
35
|
-
sizes,
|
|
36
|
-
...imgProps
|
|
37
|
-
});
|
|
38
|
-
} else if (childrenProp != null) {
|
|
39
|
-
children = childrenProp;
|
|
40
|
-
} else if (hasImg && alt) {
|
|
41
|
-
children = alt[0];
|
|
42
|
-
} else {
|
|
43
|
-
children = /* @__PURE__ */ jsx(DefaultAvatar, {
|
|
44
|
-
id,
|
|
45
|
-
title,
|
|
46
|
-
...rest
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
return /* @__PURE__ */ jsx("div", {
|
|
50
|
-
ref,
|
|
51
|
-
className: clsx(withBaseName(), withBaseName(size), className),
|
|
52
|
-
...rest,
|
|
53
|
-
children
|
|
54
|
-
});
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
export { Avatar };
|
|
58
|
-
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport { classBase } from \"./internal/constants\";\nimport { DefaultAvatar } from \"./internal/DefaultAvatar\";\nimport { useLoaded } from \"./internal/useLoaded\";\n\nimport \"./Avatar.css\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n alt?: string;\n id?: string;\n imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n size?: \"small\" | \"medium\" | \"large\";\n sizes?: string;\n src?: string;\n srcSet?: string;\n title?: string;\n}\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n alt = \"\",\n className,\n children: childrenProp,\n id: idProp,\n size = \"medium\",\n src,\n srcSet,\n title = \"user\",\n imgProps,\n sizes,\n ...rest\n },\n ref\n) {\n let children;\n const id = useId(idProp);\n\n const loaded = useLoaded({ ...imgProps, src, srcSet });\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && loaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n className={withBaseName(\"image\")}\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n children = alt[0];\n } else {\n children = <DefaultAvatar id={id} title={title} {...rest} />;\n }\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), withBaseName(size), className)}\n {...rest}\n >\n {children}\n </div>\n );\n});\n"],"names":["Avatar"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAE9B,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,EAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AACJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,SAAS,SAAU,CAAA,EAAE,GAAG,QAAU,EAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AACrD,EAAA,MAAM,SAAS,GAAO,IAAA,MAAA,CAAA;AACtB,EAAM,MAAA,gBAAA,GAAmB,UAAU,MAAW,KAAA,OAAA,CAAA;AAE9C,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb,MAAA,IAAW,UAAU,GAAK,EAAA;AACxB,IAAA,QAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,GACV,MAAA;AACL,IAAA,QAAA,mBAAY,GAAA,CAAA,aAAA,EAAA;AAAA,MAAc,EAAA;AAAA,MAAQ,KAAA;AAAA,MAAe,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,IAC5D,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { classBase } from './constants.js';
|
|
4
|
-
|
|
5
|
-
const withBaseName = makePrefixer(classBase);
|
|
6
|
-
function DefaultAvatar({ id, title }) {
|
|
7
|
-
return /* @__PURE__ */ jsxs("svg", {
|
|
8
|
-
"aria-labelledby": id,
|
|
9
|
-
height: "64px",
|
|
10
|
-
role: "img",
|
|
11
|
-
viewBox: "0 0 64 64",
|
|
12
|
-
width: "64px",
|
|
13
|
-
children: [
|
|
14
|
-
/* @__PURE__ */ jsx("title", {
|
|
15
|
-
id,
|
|
16
|
-
children: title
|
|
17
|
-
}),
|
|
18
|
-
/* @__PURE__ */ jsx("g", {
|
|
19
|
-
className: withBaseName("svgRoot"),
|
|
20
|
-
fill: "none",
|
|
21
|
-
fillRule: "evenodd",
|
|
22
|
-
stroke: "none",
|
|
23
|
-
children: /* @__PURE__ */ jsxs("g", {
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ jsx("path", {
|
|
26
|
-
className: withBaseName("svgDisc"),
|
|
27
|
-
d: "M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z"
|
|
28
|
-
}),
|
|
29
|
-
/* @__PURE__ */ jsx("path", {
|
|
30
|
-
className: withBaseName("svgHead"),
|
|
31
|
-
d: "M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462"
|
|
32
|
-
})
|
|
33
|
-
]
|
|
34
|
-
})
|
|
35
|
-
})
|
|
36
|
-
]
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export { DefaultAvatar };
|
|
41
|
-
//# sourceMappingURL=DefaultAvatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultAvatar.js","sources":["../src/avatar/internal/DefaultAvatar.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { classBase } from \"./constants\";\n\nconst withBaseName = makePrefixer(classBase);\n\nexport function DefaultAvatar({ id, title }: HTMLAttributes<HTMLElement>) {\n return (\n <svg\n aria-labelledby={id}\n height=\"64px\"\n role=\"img\"\n viewBox=\"0 0 64 64\"\n width=\"64px\"\n >\n <title id={id}>{title}</title>\n <g\n className={withBaseName(\"svgRoot\")}\n fill=\"none\"\n fillRule=\"evenodd\"\n stroke=\"none\"\n >\n <g>\n <path\n className={withBaseName(\"svgDisc\")}\n d=\"M0,32 C0,49.6769231 14.3230769,64 32,64 C49.6769231,64 64,49.6769231 64,32 C64,14.3230769 49.6769231,0 32,0 C14.3230769,0 0,14.3230769 0,32 Z\"\n />\n <path\n className={withBaseName(\"svgHead\")}\n d=\"M31.9995627,62.8538462 C22.4716151,62.8538462 13.9354845,58.5287108 8.24473082,51.7487468 C11.1388856,50.496781 18.3580131,47.8952936 22.9268753,46.5620313 C23.2845799,46.4482162 23.349617,46.4319569 23.349617,44.8222866 C23.349617,43.0988012 23.1545055,41.879354 22.7317638,40.9850927 C22.1626884,39.7656455 21.479798,37.7007148 21.2359085,35.8469925 C20.5530181,35.0504496 19.6262382,33.4893945 19.0246442,30.4978466 C18.5043468,27.8638406 18.7482362,26.9045421 19.0896814,26.0102808 C19.1222,25.9127251 19.1709779,25.8151693 19.1872372,25.7176135 C19.3173116,25.1160195 19.1384593,21.8966789 18.683199,19.4090065 C18.3742724,17.7017804 18.7644955,14.0759574 21.1220935,11.0679876 C22.6016894,9.16564991 25.4470663,6.84057054 30.5524853,6.51538462 L33.3978621,6.51538462 C38.5845776,6.84057054 41.4299545,9.16564991 42.9095504,11.0679876 C45.2671484,14.0759574 45.6573715,17.7017804 45.3321856,19.4090065 C44.8769253,21.8966789 44.698073,25.0997602 44.8281474,25.7176135 C44.8444067,25.8151693 44.8931846,25.9127251 44.9257032,25.9940215 C45.2671484,26.8882828 45.5272971,27.8475813 44.9907404,30.4815873 C44.3891464,33.4732978 43.4623665,35.0340277 42.7794761,35.8308958 C42.5355866,37.6844555 41.8526962,39.7331269 41.2836208,40.9686708 C40.747064,42.0907248 40.2105073,43.4239871 40.2105073,44.7572494 C40.2105073,46.3669197 40.2755445,46.383179 40.6495083,46.4968315 C44.9907404,47.7814785 52.4700167,50.3667066 55.7706538,51.7162282 C50.0799001,58.5126141 41.5437696,62.8538462 31.9995627,62.8538462\"\n />\n </g>\n </g>\n </svg>\n );\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAEpC,SAAS,aAAc,CAAA,EAAE,EAAI,EAAA,KAAA,EAAsC,EAAA;AACxE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,iBAAiB,EAAA,EAAA;AAAA,IACjB,MAAO,EAAA,MAAA;AAAA,IACP,IAAK,EAAA,KAAA;AAAA,IACL,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,MAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,QAAM,EAAA;AAAA,QAAS,QAAA,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,sBACrB,GAAA,CAAA,GAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACjC,IAAK,EAAA,MAAA;AAAA,QACL,QAAS,EAAA,SAAA;AAAA,QACT,MAAO,EAAA,MAAA;AAAA,QAEP,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA;AAAA,UACC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,+IAAA;AAAA,aACJ,CAAA;AAAA,4BACC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,cACjC,CAAE,EAAA,o+CAAA;AAAA,aACJ,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sources":["../src/avatar/internal/constants.ts"],"sourcesContent":["export const classBase = \"saltAvatar\";\n"],"names":[],"mappings":"AAAO,MAAM,SAAY,GAAA;;;;"}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
function useLoaded({
|
|
4
|
-
crossOrigin,
|
|
5
|
-
referrerPolicy,
|
|
6
|
-
src,
|
|
7
|
-
srcSet
|
|
8
|
-
}) {
|
|
9
|
-
const [loaded, setLoaded] = useState(false);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (!src && !srcSet) {
|
|
12
|
-
return void 0;
|
|
13
|
-
}
|
|
14
|
-
setLoaded(false);
|
|
15
|
-
let active = true;
|
|
16
|
-
const image = new Image();
|
|
17
|
-
image.onload = () => {
|
|
18
|
-
if (!active) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
setLoaded("loaded");
|
|
22
|
-
};
|
|
23
|
-
image.onerror = () => {
|
|
24
|
-
if (!active) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
setLoaded("error");
|
|
28
|
-
};
|
|
29
|
-
image.crossOrigin = crossOrigin;
|
|
30
|
-
image.referrerPolicy = referrerPolicy;
|
|
31
|
-
image.src = src;
|
|
32
|
-
if (srcSet) {
|
|
33
|
-
image.srcset = srcSet;
|
|
34
|
-
}
|
|
35
|
-
return () => {
|
|
36
|
-
active = false;
|
|
37
|
-
};
|
|
38
|
-
}, [crossOrigin, referrerPolicy, src, srcSet]);
|
|
39
|
-
return loaded;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export { useLoaded };
|
|
43
|
-
//# sourceMappingURL=useLoaded.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useLoaded.js","sources":["../src/avatar/internal/useLoaded.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\n\nexport function useLoaded({\n crossOrigin,\n referrerPolicy,\n src,\n srcSet,\n}: ImgHTMLAttributes<HTMLImageElement>) {\n const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n useEffect(() => {\n if (!src && !srcSet) {\n return undefined;\n }\n\n setLoaded(false);\n\n let active = true;\n const image = new Image();\n image.onload = () => {\n if (!active) {\n return;\n }\n setLoaded(\"loaded\");\n };\n image.onerror = () => {\n if (!active) {\n return;\n }\n setLoaded(\"error\");\n };\n image.crossOrigin = crossOrigin as HTMLImageElement[\"crossOrigin\"];\n image.referrerPolicy = referrerPolicy as HTMLImageElement[\"referrerPolicy\"];\n image.src = src as HTMLImageElement[\"src\"];\n if (srcSet) {\n image.srcset = srcSet;\n }\n\n return () => {\n active = false;\n };\n }, [crossOrigin, referrerPolicy, src, srcSet]);\n\n return loaded;\n}\n"],"names":[],"mappings":";;AAEO,SAAS,SAAU,CAAA;AAAA,EACxB,WAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AACF,CAAwC,EAAA;AACtC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAqC,KAAK,CAAA,CAAA;AAEtE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,GAAO,IAAA,CAAC,MAAQ,EAAA;AACnB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAEA,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAEf,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,SAAS,MAAM;AACnB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AAAA,KACpB,CAAA;AACA,IAAA,KAAA,CAAM,UAAU,MAAM;AACpB,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAA,OAAA;AAAA,OACF;AACA,MAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAAA,KACnB,CAAA;AACA,IAAA,KAAA,CAAM,WAAc,GAAA,WAAA,CAAA;AACpB,IAAA,KAAA,CAAM,cAAiB,GAAA,cAAA,CAAA;AACvB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,KAAA,CAAM,MAAS,GAAA,MAAA,CAAA;AAAA,KACjB;AAEA,IAAA,OAAO,MAAM;AACX,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,KACC,CAAC,WAAA,EAAa,cAAgB,EAAA,GAAA,EAAK,MAAM,CAAC,CAAA,CAAA;AAE7C,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, ImgHTMLAttributes } from "react";
|
|
2
|
-
import "./Avatar.css";
|
|
3
|
-
export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
alt?: string;
|
|
5
|
-
id?: string;
|
|
6
|
-
imgProps?: ImgHTMLAttributes<HTMLImageElement>;
|
|
7
|
-
size?: "small" | "medium" | "large";
|
|
8
|
-
sizes?: string;
|
|
9
|
-
src?: string;
|
|
10
|
-
srcSet?: string;
|
|
11
|
-
title?: string;
|
|
12
|
-
}
|
|
13
|
-
export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Avatar";
|