@salt-ds/core 1.3.0 → 1.5.0
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/core/src/avatar/Avatar.js +11 -3
- package/dist-cjs/packages/core/src/avatar/Avatar.js.map +1 -1
- package/dist-cjs/packages/core/src/avatar/useAvatarImage.js +38 -0
- package/dist-cjs/packages/core/src/avatar/useAvatarImage.js.map +1 -0
- package/dist-cjs/packages/core/src/card/Card.css.js +1 -1
- package/dist-cjs/packages/core/src/card/Card.js +1 -1
- package/dist-cjs/packages/core/src/card/Card.js.map +1 -1
- package/dist-cjs/packages/core/src/card/InteractableCard.css.js +9 -0
- package/dist-cjs/packages/core/src/card/InteractableCard.css.js.map +1 -0
- package/dist-cjs/packages/core/src/card/InteractableCard.js +57 -0
- package/dist-cjs/packages/core/src/card/InteractableCard.js.map +1 -0
- package/dist-cjs/packages/core/src/card/useInteractableCard.js +63 -0
- package/dist-cjs/packages/core/src/card/useInteractableCard.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/Checkbox.css.js +9 -0
- package/dist-cjs/packages/core/src/checkbox/Checkbox.css.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/Checkbox.js +95 -0
- package/dist-cjs/packages/core/src/checkbox/Checkbox.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxGroup.css.js +9 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxGroup.css.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxGroup.js +62 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxGroup.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxIcon.css.js +9 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxIcon.css.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxIcon.js +48 -0
- package/dist-cjs/packages/core/src/checkbox/CheckboxIcon.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js +33 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js +32 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js +37 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js +26 -0
- package/dist-cjs/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/internal/CheckboxGroupContext.js +13 -0
- package/dist-cjs/packages/core/src/checkbox/internal/CheckboxGroupContext.js.map +1 -0
- package/dist-cjs/packages/core/src/checkbox/internal/useCheckboxGroup.js +13 -0
- package/dist-cjs/packages/core/src/checkbox/internal/useCheckboxGroup.js.map +1 -0
- package/dist-cjs/packages/core/src/flex-item/FlexItem.css.js +1 -1
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js +3 -0
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/packages/core/src/index.js +18 -0
- package/dist-cjs/packages/core/src/index.js.map +1 -1
- package/dist-cjs/packages/core/src/link/Link.css.js +1 -1
- package/dist-cjs/packages/core/src/link/Link.js +1 -1
- package/dist-cjs/packages/core/src/link/Link.js.map +1 -1
- package/dist-cjs/packages/core/src/panel/Panel.css.js +1 -1
- package/dist-cjs/packages/core/src/radio-button/RadioButton.css.js +9 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButton.css.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButton.js +86 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButton.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonGroup.css.js +9 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonGroup.css.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonGroup.js +61 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonGroup.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonIcon.css.js +9 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonIcon.css.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonIcon.js +48 -0
- package/dist-cjs/packages/core/src/radio-button/RadioButtonIcon.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/internal/RadioGroupContext.js +18 -0
- package/dist-cjs/packages/core/src/radio-button/internal/RadioGroupContext.js.map +1 -0
- package/dist-cjs/packages/core/src/radio-button/internal/useRadioGroup.js +13 -0
- package/dist-cjs/packages/core/src/radio-button/internal/useRadioGroup.js.map +1 -0
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js +1 -1
- package/dist-cjs/packages/core/src/text/Text.css.js +1 -1
- package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js +12 -6
- package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js +1 -0
- package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/packages/core/src/utils/capitalize.js +10 -0
- package/dist-cjs/packages/core/src/utils/capitalize.js.map +1 -0
- package/dist-cjs/packages/core/src/utils/useFloatingUI.js.map +1 -1
- package/dist-es/packages/core/src/avatar/Avatar.js +11 -3
- package/dist-es/packages/core/src/avatar/Avatar.js.map +1 -1
- package/dist-es/packages/core/src/avatar/useAvatarImage.js +34 -0
- package/dist-es/packages/core/src/avatar/useAvatarImage.js.map +1 -0
- package/dist-es/packages/core/src/card/Card.css.js +1 -1
- package/dist-es/packages/core/src/card/Card.js +1 -1
- package/dist-es/packages/core/src/card/Card.js.map +1 -1
- package/dist-es/packages/core/src/card/InteractableCard.css.js +7 -0
- package/dist-es/packages/core/src/card/InteractableCard.css.js.map +1 -0
- package/dist-es/packages/core/src/card/InteractableCard.js +53 -0
- package/dist-es/packages/core/src/card/InteractableCard.js.map +1 -0
- package/dist-es/packages/core/src/card/useInteractableCard.js +59 -0
- package/dist-es/packages/core/src/card/useInteractableCard.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/Checkbox.css.js +7 -0
- package/dist-es/packages/core/src/checkbox/Checkbox.css.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/Checkbox.js +91 -0
- package/dist-es/packages/core/src/checkbox/Checkbox.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/CheckboxGroup.css.js +7 -0
- package/dist-es/packages/core/src/checkbox/CheckboxGroup.css.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/CheckboxGroup.js +58 -0
- package/dist-es/packages/core/src/checkbox/CheckboxGroup.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/CheckboxIcon.css.js +7 -0
- package/dist-es/packages/core/src/checkbox/CheckboxIcon.css.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/CheckboxIcon.js +44 -0
- package/dist-es/packages/core/src/checkbox/CheckboxIcon.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js +29 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIcon.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js +28 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxCheckedIconHD.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js +33 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxIndeterminateIcon.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js +22 -0
- package/dist-es/packages/core/src/checkbox/assets/CheckboxUncheckedIcon.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/internal/CheckboxGroupContext.js +9 -0
- package/dist-es/packages/core/src/checkbox/internal/CheckboxGroupContext.js.map +1 -0
- package/dist-es/packages/core/src/checkbox/internal/useCheckboxGroup.js +9 -0
- package/dist-es/packages/core/src/checkbox/internal/useCheckboxGroup.js.map +1 -0
- package/dist-es/packages/core/src/flex-item/FlexItem.css.js +1 -1
- package/dist-es/packages/core/src/flex-item/FlexItem.js +3 -0
- package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-es/packages/core/src/index.js +9 -0
- package/dist-es/packages/core/src/index.js.map +1 -1
- package/dist-es/packages/core/src/link/Link.css.js +1 -1
- package/dist-es/packages/core/src/link/Link.js +1 -1
- package/dist-es/packages/core/src/link/Link.js.map +1 -1
- package/dist-es/packages/core/src/panel/Panel.css.js +1 -1
- package/dist-es/packages/core/src/radio-button/RadioButton.css.js +7 -0
- package/dist-es/packages/core/src/radio-button/RadioButton.css.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/RadioButton.js +82 -0
- package/dist-es/packages/core/src/radio-button/RadioButton.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonGroup.css.js +7 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonGroup.css.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonGroup.js +57 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonGroup.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonIcon.css.js +7 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonIcon.css.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonIcon.js +44 -0
- package/dist-es/packages/core/src/radio-button/RadioButtonIcon.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js +14 -0
- package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js.map +1 -0
- package/dist-es/packages/core/src/radio-button/internal/useRadioGroup.js +9 -0
- package/dist-es/packages/core/src/radio-button/internal/useRadioGroup.js.map +1 -0
- package/dist-es/packages/core/src/spinner/Spinner.css.js +1 -1
- package/dist-es/packages/core/src/text/Text.css.js +1 -1
- package/dist-es/packages/core/src/tooltip/Tooltip.css.js +1 -1
- package/dist-es/packages/core/src/tooltip/Tooltip.js +12 -6
- package/dist-es/packages/core/src/tooltip/Tooltip.js.map +1 -1
- package/dist-es/packages/core/src/tooltip/useTooltip.js +1 -0
- package/dist-es/packages/core/src/tooltip/useTooltip.js.map +1 -1
- package/dist-es/packages/core/src/utils/capitalize.js +6 -0
- package/dist-es/packages/core/src/utils/capitalize.js.map +1 -0
- package/dist-es/packages/core/src/utils/useFloatingUI.js.map +1 -1
- package/dist-types/avatar/index.d.ts +1 -0
- package/dist-types/avatar/useAvatarImage.d.ts +2 -0
- package/dist-types/card/Card.d.ts +4 -4
- package/dist-types/card/InteractableCard.d.ts +14 -0
- package/dist-types/card/index.d.ts +1 -0
- package/dist-types/card/useInteractableCard.d.ts +21 -0
- package/dist-types/checkbox/Checkbox.d.ts +56 -0
- package/dist-types/checkbox/CheckboxGroup.d.ts +30 -0
- package/dist-types/checkbox/CheckboxIcon.d.ts +10 -0
- package/dist-types/checkbox/assets/CheckboxCheckedIcon.d.ts +4 -0
- package/dist-types/checkbox/assets/CheckboxCheckedIconHD.d.ts +4 -0
- package/dist-types/checkbox/assets/CheckboxIndeterminateIcon.d.ts +4 -0
- package/dist-types/checkbox/assets/CheckboxUncheckedIcon.d.ts +4 -0
- package/dist-types/checkbox/assets/index.d.ts +4 -0
- package/dist-types/checkbox/index.d.ts +3 -0
- package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts +9 -0
- package/dist-types/checkbox/internal/useCheckboxGroup.d.ts +2 -0
- package/dist-types/flex-item/FlexItem.d.ts +7 -4
- package/dist-types/index.d.ts +2 -0
- package/dist-types/link/Link.d.ts +1 -1
- package/dist-types/radio-button/RadioButton.d.ts +45 -0
- package/dist-types/radio-button/RadioButtonGroup.d.ts +29 -0
- package/dist-types/radio-button/RadioButtonIcon.d.ts +11 -0
- package/dist-types/radio-button/index.d.ts +3 -0
- package/dist-types/radio-button/internal/RadioGroupContext.d.ts +7 -0
- package/dist-types/radio-button/internal/useRadioGroup.d.ts +1 -0
- package/dist-types/tooltip/Tooltip.d.ts +10 -10
- package/dist-types/tooltip/useTooltip.d.ts +19 -1
- package/dist-types/utils/capitalize.d.ts +1 -0
- package/dist-types/utils/index.d.ts +1 -0
- package/dist-types/utils/useFloatingUI.d.ts +3 -3
- package/package.json +2 -2
- package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js +0 -30
- package/dist-cjs/packages/core/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-es/packages/core/src/avatar/internal/useLoaded.js +0 -26
- package/dist-es/packages/core/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-types/avatar/internal/useLoaded.d.ts +0 -2
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import "./Checkbox.css";
|
|
3
|
+
export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
|
|
4
|
+
/**
|
|
5
|
+
* If `true`, the checkbox will be checked.
|
|
6
|
+
*/
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Whether the checkbox component is checked by default
|
|
10
|
+
* This will be disregarded if checked is already set.
|
|
11
|
+
*/
|
|
12
|
+
defaultChecked?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* If `true`, the checkbox will be disabled.
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* If `true`, the checkbox will be in the error state.
|
|
19
|
+
*/
|
|
20
|
+
error?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* If true, the checkbox appears indeterminate. This does not set the native
|
|
23
|
+
* input element to indeterminate due to the inconsistent behaviour across browsers
|
|
24
|
+
* However, a data-indeterminate attribute is set on the input.
|
|
25
|
+
*/
|
|
26
|
+
indeterminate?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Properties applied to the input element.
|
|
29
|
+
*/
|
|
30
|
+
inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
|
|
31
|
+
/**
|
|
32
|
+
* The label to be shown next to the checkbox.
|
|
33
|
+
*/
|
|
34
|
+
label?: ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* The name applied to the input.
|
|
37
|
+
*/
|
|
38
|
+
name?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Callback when checkbox loses focus.
|
|
41
|
+
*/
|
|
42
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
43
|
+
/**
|
|
44
|
+
* Callback when checked state is changed.
|
|
45
|
+
*/
|
|
46
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
47
|
+
/**
|
|
48
|
+
* Callback when checkbox gains focus.
|
|
49
|
+
*/
|
|
50
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
51
|
+
/**
|
|
52
|
+
* The value of the checkbox.
|
|
53
|
+
*/
|
|
54
|
+
value?: string;
|
|
55
|
+
}
|
|
56
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import "./CheckboxGroup.css";
|
|
3
|
+
export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
|
|
4
|
+
/**
|
|
5
|
+
* The current checked options.
|
|
6
|
+
*/
|
|
7
|
+
checkedValues?: string[];
|
|
8
|
+
/**
|
|
9
|
+
* The default selected options for un-controlled component.
|
|
10
|
+
*/
|
|
11
|
+
defaultCheckedValues?: string[];
|
|
12
|
+
/**
|
|
13
|
+
* Display group of elements in a compact row.
|
|
14
|
+
*/
|
|
15
|
+
direction?: "horizontal" | "vertical";
|
|
16
|
+
/**
|
|
17
|
+
* The name used to reference the value of the control.
|
|
18
|
+
*/
|
|
19
|
+
name?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Callback fired when a checkbox is clicked.
|
|
22
|
+
* `event.target.value` returns the value of the checkbox that was clicked.
|
|
23
|
+
*/
|
|
24
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
25
|
+
/**
|
|
26
|
+
* Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.
|
|
27
|
+
*/
|
|
28
|
+
wrap?: boolean;
|
|
29
|
+
}
|
|
30
|
+
export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import "./CheckboxIcon.css";
|
|
3
|
+
export interface CheckboxIconProps {
|
|
4
|
+
checked?: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
error?: boolean;
|
|
8
|
+
indeterminate?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, error, indeterminate, }: CheckboxIconProps) => JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CheckboxGroupProps } from "../CheckboxGroup";
|
|
3
|
+
export interface CheckboxGroupState {
|
|
4
|
+
name?: CheckboxGroupProps["name"];
|
|
5
|
+
onChange?: CheckboxGroupProps["onChange"];
|
|
6
|
+
checkedValues?: CheckboxGroupProps["checkedValues"];
|
|
7
|
+
}
|
|
8
|
+
declare const CheckboxGroupContext: import("react").Context<CheckboxGroupState>;
|
|
9
|
+
export { CheckboxGroupContext };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementType, ReactElement } from "react";
|
|
1
|
+
import { ElementType, ReactElement, CSSProperties } from "react";
|
|
2
2
|
import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
|
|
3
3
|
import "./FlexItem.css";
|
|
4
4
|
export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
|
|
@@ -9,14 +9,17 @@ export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentP
|
|
|
9
9
|
*/
|
|
10
10
|
align?: flexItemAlignment;
|
|
11
11
|
/**
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
12
|
+
* Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
|
|
13
|
+
*/
|
|
15
14
|
shrink?: ResponsiveProp<number>;
|
|
16
15
|
/**
|
|
17
16
|
* Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
|
|
18
17
|
*/
|
|
19
18
|
grow?: ResponsiveProp<number>;
|
|
19
|
+
/**
|
|
20
|
+
* Sets the initial main size of a flex item, default is "auto".
|
|
21
|
+
*/
|
|
22
|
+
basis?: ResponsiveProp<CSSProperties["flexBasis"]>;
|
|
20
23
|
}>;
|
|
21
24
|
declare type FlexItemComponent = <T extends ElementType = "div">(props: FlexItemProps<T>) => ReactElement | null;
|
|
22
25
|
export declare const FlexItem: FlexItemComponent;
|
package/dist-types/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export * from "./border-layout";
|
|
|
5
5
|
export * from "./breakpoints";
|
|
6
6
|
export * from "./button";
|
|
7
7
|
export * from "./card";
|
|
8
|
+
export * from "./checkbox";
|
|
8
9
|
export * from "./flex-item";
|
|
9
10
|
export * from "./flex-layout";
|
|
10
11
|
export * from "./flow-layout";
|
|
@@ -12,6 +13,7 @@ export * from "./grid-item";
|
|
|
12
13
|
export * from "./grid-layout";
|
|
13
14
|
export * from "./link";
|
|
14
15
|
export * from "./panel";
|
|
16
|
+
export * from "./radio-button";
|
|
15
17
|
export * from "./spinner";
|
|
16
18
|
export * from "./stack-layout";
|
|
17
19
|
export * from "./status-indicator";
|
|
@@ -9,6 +9,6 @@ import "./Link.css";
|
|
|
9
9
|
* <LinkExample to="#link">Action</LinkExample>
|
|
10
10
|
*/
|
|
11
11
|
export interface LinkProps extends Omit<TextProps<"a">, "as" | "disabled"> {
|
|
12
|
-
IconComponent?: ComponentType<IconProps
|
|
12
|
+
IconComponent?: ComponentType<IconProps> | null;
|
|
13
13
|
}
|
|
14
14
|
export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ChangeEventHandler, FocusEventHandler, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import "./RadioButton.css";
|
|
3
|
+
export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
|
|
4
|
+
/**
|
|
5
|
+
* Set the default selected radio button in the group
|
|
6
|
+
*/
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Set the disabled state
|
|
10
|
+
*/
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Set the error state
|
|
14
|
+
*/
|
|
15
|
+
error?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Props to be passed to the radio input
|
|
18
|
+
*/
|
|
19
|
+
inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;
|
|
20
|
+
/**
|
|
21
|
+
* The label to be shown next to the radio icon
|
|
22
|
+
*/
|
|
23
|
+
label?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Name of the radio group
|
|
26
|
+
*/
|
|
27
|
+
name?: string;
|
|
28
|
+
/**
|
|
29
|
+
* Callback for blur event
|
|
30
|
+
*/
|
|
31
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
32
|
+
/**
|
|
33
|
+
* Callback for change event
|
|
34
|
+
*/
|
|
35
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
36
|
+
/**
|
|
37
|
+
* Callback for focus event
|
|
38
|
+
*/
|
|
39
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
40
|
+
/**
|
|
41
|
+
* Value of radio button
|
|
42
|
+
*/
|
|
43
|
+
value?: string;
|
|
44
|
+
}
|
|
45
|
+
export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import "./RadioButtonGroup.css";
|
|
3
|
+
export interface RadioButtonGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
|
|
4
|
+
/**
|
|
5
|
+
* Set the selected value when initialized.
|
|
6
|
+
*/
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Set the group direction.
|
|
10
|
+
*/
|
|
11
|
+
direction?: "horizontal" | "vertical";
|
|
12
|
+
/**
|
|
13
|
+
* Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.
|
|
14
|
+
*/
|
|
15
|
+
wrap?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* The name to be set on each radio button within the group. If not set, then one will be generated for you.
|
|
18
|
+
*/
|
|
19
|
+
name?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Callback for change event.
|
|
22
|
+
*/
|
|
23
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
24
|
+
/**
|
|
25
|
+
* The value of the radio group, required for a controlled component.
|
|
26
|
+
*/
|
|
27
|
+
value?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<RadioButtonGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import "./RadioButtonIcon.css";
|
|
3
|
+
export interface RadioButtonIconProps {
|
|
4
|
+
checked?: boolean;
|
|
5
|
+
error?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Default radio icon
|
|
10
|
+
*/
|
|
11
|
+
export declare const RadioButtonIcon: ({ checked, error, disabled, }: RadioButtonIconProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useRadioGroup(): import("./RadioGroupContext").RadioGroupContextValue;
|
|
@@ -4,43 +4,43 @@ import { UseFloatingUIProps } from "../utils";
|
|
|
4
4
|
import "./Tooltip.css";
|
|
5
5
|
export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement"> {
|
|
6
6
|
/**
|
|
7
|
-
* The children will be the
|
|
7
|
+
* The children will be the Tooltip's trigger.
|
|
8
8
|
*/
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
/**
|
|
11
|
-
* Whether to hide the
|
|
11
|
+
* Whether to hide the Tooltip arrow. Defaults to `false`.
|
|
12
12
|
*/
|
|
13
13
|
hideArrow?: boolean;
|
|
14
14
|
/**
|
|
15
|
-
* Whether to hide the
|
|
15
|
+
* Whether to hide the status icon within the Tooltip. Defaults to `false`.
|
|
16
16
|
*/
|
|
17
17
|
hideIcon?: boolean;
|
|
18
18
|
/**
|
|
19
|
-
* Content displayed inside the
|
|
19
|
+
* Content displayed inside the Tooltip. Can be a string or a React component.
|
|
20
20
|
*/
|
|
21
21
|
content: ReactNode;
|
|
22
22
|
/**
|
|
23
|
-
* A string to determine the
|
|
23
|
+
* A string to determine the status of the Tooltip. Defaults to `info`.
|
|
24
24
|
*/
|
|
25
25
|
status?: ValidationStatus;
|
|
26
26
|
/**
|
|
27
|
-
* Delay in milliseconds before the
|
|
27
|
+
* Delay in milliseconds before the Tooltip is shown.
|
|
28
28
|
*/
|
|
29
29
|
enterDelay?: number;
|
|
30
30
|
/**
|
|
31
|
-
* Delay in milliseconds before the
|
|
31
|
+
* Delay in milliseconds before the Tooltip is hidden.
|
|
32
32
|
*/
|
|
33
33
|
leaveDelay?: number;
|
|
34
34
|
/**
|
|
35
|
-
* Option to not display the
|
|
35
|
+
* Option to not display the Tooltip. Can be used in conditional situations like text truncation.
|
|
36
36
|
*/
|
|
37
37
|
disabled?: boolean;
|
|
38
38
|
/**
|
|
39
|
-
* Option to remove the hover listener
|
|
39
|
+
* Option to remove the hover listener.
|
|
40
40
|
*/
|
|
41
41
|
disableHoverListener?: boolean;
|
|
42
42
|
/**
|
|
43
|
-
* Option to remove the focus listener
|
|
43
|
+
* Option to remove the focus listener.
|
|
44
44
|
*/
|
|
45
45
|
disableFocusListener?: boolean;
|
|
46
46
|
}
|
|
@@ -22,7 +22,25 @@ export interface UseTooltipProps extends Partial<Pick<UseFloatingUIProps, "onOpe
|
|
|
22
22
|
}
|
|
23
23
|
export declare function useTooltip(props?: UseTooltipProps): {
|
|
24
24
|
arrowProps: {
|
|
25
|
-
ref: import("react").MutableRefObject<
|
|
25
|
+
ref: import("react").MutableRefObject<SVGSVGElement | null>;
|
|
26
|
+
context: {
|
|
27
|
+
x: number | null;
|
|
28
|
+
y: number | null;
|
|
29
|
+
placement: import("@floating-ui/react").Placement;
|
|
30
|
+
strategy: import("@floating-ui/react").Strategy;
|
|
31
|
+
middlewareData: import("@floating-ui/react").MiddlewareData;
|
|
32
|
+
update: () => void;
|
|
33
|
+
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
34
|
+
floating: (node: HTMLElement | null) => void;
|
|
35
|
+
isPositioned: boolean;
|
|
36
|
+
open: boolean;
|
|
37
|
+
onOpenChange: (open: boolean) => void;
|
|
38
|
+
events: import("@floating-ui/react").FloatingEvents;
|
|
39
|
+
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
40
|
+
nodeId: string | undefined;
|
|
41
|
+
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
42
|
+
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
43
|
+
};
|
|
26
44
|
style: {
|
|
27
45
|
left: string;
|
|
28
46
|
top: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function capitalize(value: string): string;
|
|
@@ -2,17 +2,17 @@ import type { Middleware, Placement, Strategy } from "@floating-ui/react";
|
|
|
2
2
|
import { useFloating } from "@floating-ui/react";
|
|
3
3
|
export declare type UseFloatingUIProps = {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Sets position relative to trigger.
|
|
6
6
|
*/
|
|
7
7
|
placement?: Placement;
|
|
8
8
|
strategy?: Strategy;
|
|
9
9
|
middleware?: Middleware[];
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
11
|
+
* Sets visible state.
|
|
12
12
|
*/
|
|
13
13
|
open?: boolean;
|
|
14
14
|
/**
|
|
15
|
-
* Callback function triggered when open state changes
|
|
15
|
+
* Callback function triggered when open state changes.
|
|
16
16
|
*/
|
|
17
17
|
onOpenChange?: (open: boolean) => void;
|
|
18
18
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "dist-cjs/packages/core/src/index.js",
|
|
6
6
|
"sideEffects": [
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/react": "^0.20.0",
|
|
27
27
|
"clsx": "^1.2.1",
|
|
28
|
-
"@salt-ds/icons": "1.
|
|
28
|
+
"@salt-ds/icons": "1.2.0"
|
|
29
29
|
},
|
|
30
30
|
"files": [
|
|
31
31
|
"dist-cjs",
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var React = require('react');
|
|
6
|
-
|
|
7
|
-
function useLoaded({ src }) {
|
|
8
|
-
const [loaded, setLoaded] = React.useState(false);
|
|
9
|
-
React.useEffect(() => {
|
|
10
|
-
if (!src) {
|
|
11
|
-
return void 0;
|
|
12
|
-
}
|
|
13
|
-
setLoaded(false);
|
|
14
|
-
let active = true;
|
|
15
|
-
const image = new Image();
|
|
16
|
-
const onLoad = () => active && setLoaded("loaded");
|
|
17
|
-
const onError = () => active && setLoaded("error");
|
|
18
|
-
image.addEventListener("load", onLoad, { once: true });
|
|
19
|
-
image.addEventListener("error", onError, { once: true });
|
|
20
|
-
return () => {
|
|
21
|
-
image.removeEventListener("load", onLoad);
|
|
22
|
-
image.removeEventListener("load", onError);
|
|
23
|
-
active = false;
|
|
24
|
-
};
|
|
25
|
-
}, [src]);
|
|
26
|
-
return loaded;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
exports.useLoaded = useLoaded;
|
|
30
|
-
//# 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({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n useEffect(() => {\n if (!src) {\n return undefined;\n }\n\n setLoaded(false);\n\n let active = true;\n const image = new Image();\n const onLoad = () => active && setLoaded(\"loaded\");\n const onError = () => active && setLoaded(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return loaded;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;;;AAEgB,SAAA,SAAA,CAAU,EAAE,GAAA,EAA4C,EAAA;AACtE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAqC,KAAK,CAAA,CAAA;AAEtE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,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,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
function useLoaded({ src }) {
|
|
4
|
-
const [loaded, setLoaded] = useState(false);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (!src) {
|
|
7
|
-
return void 0;
|
|
8
|
-
}
|
|
9
|
-
setLoaded(false);
|
|
10
|
-
let active = true;
|
|
11
|
-
const image = new Image();
|
|
12
|
-
const onLoad = () => active && setLoaded("loaded");
|
|
13
|
-
const onError = () => active && setLoaded("error");
|
|
14
|
-
image.addEventListener("load", onLoad, { once: true });
|
|
15
|
-
image.addEventListener("error", onError, { once: true });
|
|
16
|
-
return () => {
|
|
17
|
-
image.removeEventListener("load", onLoad);
|
|
18
|
-
image.removeEventListener("load", onError);
|
|
19
|
-
active = false;
|
|
20
|
-
};
|
|
21
|
-
}, [src]);
|
|
22
|
-
return loaded;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export { useLoaded };
|
|
26
|
-
//# 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({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [loaded, setLoaded] = useState<false | \"loaded\" | \"error\">(false);\n\n useEffect(() => {\n if (!src) {\n return undefined;\n }\n\n setLoaded(false);\n\n let active = true;\n const image = new Image();\n const onLoad = () => active && setLoaded(\"loaded\");\n const onError = () => active && setLoaded(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return loaded;\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,SAAA,CAAU,EAAE,GAAA,EAA4C,EAAA;AACtE,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAqC,KAAK,CAAA,CAAA;AAEtE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,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,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|