@bspk/ui 1.1.13 → 1.1.15
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/Checkbox.d.ts +1 -1
- package/dist/Checkbox.js +2 -2
- package/dist/Checkbox.js.map +1 -1
- package/dist/CheckboxOption.d.ts +2 -1
- package/dist/Dropdown.d.ts +3 -3
- package/dist/Dropdown.js +2 -1
- package/dist/Dropdown.js.map +1 -1
- package/dist/FormField.d.ts +5 -4
- package/dist/FormField.js +3 -3
- package/dist/FormField.js.map +1 -1
- package/dist/InlineAlert.js +1 -1
- package/dist/Link.d.ts +2 -1
- package/dist/Link.js.map +1 -1
- package/dist/ListItem.d.ts +1 -1
- package/dist/ListItem.js +2 -2
- package/dist/ListItem.js.map +1 -1
- package/dist/NumberField.d.ts +2 -1
- package/dist/NumberInput.d.ts +23 -13
- package/dist/NumberInput.js +15 -4
- package/dist/NumberInput.js.map +1 -1
- package/dist/Radio.d.ts +2 -2
- package/dist/Radio.js.map +1 -1
- package/dist/RadioOption.d.ts +2 -1
- package/dist/RadioOption.js.map +1 -1
- package/dist/SegmentedControl.d.ts +11 -7
- package/dist/SegmentedControl.js +7 -6
- package/dist/SegmentedControl.js.map +1 -1
- package/dist/StylesProviderAnywhere.js +1 -1
- package/dist/StylesProviderBetterHomesGardens.js +1 -1
- package/dist/StylesProviderCartus.js +1 -1
- package/dist/StylesProviderCentury21.js +1 -1
- package/dist/StylesProviderColdwellBanker.js +1 -1
- package/dist/StylesProviderCorcoran.js +1 -1
- package/dist/StylesProviderDenaliBoss.js +1 -1
- package/dist/StylesProviderEra.js +1 -1
- package/dist/StylesProviderSothebys.js +1 -1
- package/dist/TabGroup.d.ts +15 -6
- package/dist/TabGroup.js +13 -5
- package/dist/TabGroup.js.map +1 -1
- package/dist/TextField.d.ts +2 -1
- package/dist/TextField.js.map +1 -1
- package/dist/TextInput.d.ts +3 -3
- package/dist/TextInput.js +2 -2
- package/dist/TextInput.js.map +1 -1
- package/dist/Textarea.d.ts +20 -10
- package/dist/Textarea.js +15 -8
- package/dist/Textarea.js.map +1 -1
- package/dist/base.css +1 -1
- package/dist/form-field.css +1 -1
- package/dist/hooks/useFloatingMenu.d.ts +3 -2
- package/dist/hooks/useFloatingMenu.js +1 -0
- package/dist/hooks/useFloatingMenu.js.map +1 -1
- package/dist/hooks/{useNavOptions.d.ts → useOptionIconsInvalid.d.ts} +4 -5
- package/dist/hooks/useOptionIconsInvalid.js +21 -0
- package/dist/hooks/useOptionIconsInvalid.js.map +1 -0
- package/dist/index.d.ts +22 -13
- package/dist/index.js.map +1 -1
- package/dist/inline-alert.css +1 -1
- package/dist/number-input.css +1 -1
- package/dist/textarea.css +1 -1
- package/package.json +2 -2
- package/src/Checkbox.tsx +3 -0
- package/src/CheckboxOption.tsx +4 -4
- package/src/Dropdown.tsx +5 -2
- package/src/FormField.tsx +35 -24
- package/src/Link.tsx +28 -25
- package/src/ListItem.tsx +2 -0
- package/src/NumberField.tsx +5 -5
- package/src/NumberInput.tsx +51 -30
- package/src/Radio.tsx +3 -5
- package/src/RadioOption.tsx +4 -1
- package/src/SegmentedControl.tsx +18 -13
- package/src/TabGroup.tsx +33 -12
- package/src/TextField.tsx +19 -17
- package/src/TextInput.tsx +33 -30
- package/src/Textarea.tsx +72 -56
- package/src/base.scss +4 -3
- package/src/form-field.scss +2 -1
- package/src/hooks/useFloatingMenu.ts +4 -2
- package/src/hooks/useOptionIconsInvalid.ts +49 -0
- package/src/index.ts +24 -13
- package/src/inline-alert.scss +1 -1
- package/src/number-input.scss +6 -3
- package/src/textarea.scss +5 -2
- package/dist/hooks/useNavOptions.js +0 -43
- package/dist/hooks/useNavOptions.js.map +0 -1
- package/src/hooks/useNavOptions.ts +0 -76
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
import { getChildTypeName, isValidIcon } from '../utils/children';
|
|
3
|
-
import { useErrorLogger } from '../utils/errors';
|
|
4
|
-
/**
|
|
5
|
-
* A utility hook used within navigation components. Returns options ready for use in a navigation component. Validates
|
|
6
|
-
* the icons and sets the icon and iconActive properties.
|
|
7
|
-
*
|
|
8
|
-
* @param options [NavOption[]] The options to display. Each option has a label and an optional leading icon.
|
|
9
|
-
* @returns {undefined} NavOption[] The options with the validated icon and iconActive properties set.
|
|
10
|
-
*/
|
|
11
|
-
export function useNavOptions(options) {
|
|
12
|
-
const { logError } = useErrorLogger();
|
|
13
|
-
return useMemo(() => {
|
|
14
|
-
if (!options)
|
|
15
|
-
return [];
|
|
16
|
-
const iconsInvalid = options.some((o) => o.icon) ? !options.every((option) => isValidIcon(option.icon)) : null;
|
|
17
|
-
logError(iconsInvalid === true, 'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.');
|
|
18
|
-
return options
|
|
19
|
-
.map((option) => {
|
|
20
|
-
let { icon, iconActive } = option;
|
|
21
|
-
if (iconsInvalid) {
|
|
22
|
-
icon = undefined;
|
|
23
|
-
iconActive = undefined;
|
|
24
|
-
}
|
|
25
|
-
if (iconActive &&
|
|
26
|
-
// If the iconActive is not a valid icon or the iconActive is not a fill version of the icon, remove the iconActive
|
|
27
|
-
(!icon ||
|
|
28
|
-
!isValidIcon(iconActive) ||
|
|
29
|
-
getChildTypeName(iconActive) !== `${getChildTypeName(icon)}Fill`)) {
|
|
30
|
-
iconActive = undefined;
|
|
31
|
-
}
|
|
32
|
-
return {
|
|
33
|
-
...option,
|
|
34
|
-
value: option.value || option.label,
|
|
35
|
-
icon,
|
|
36
|
-
iconActive,
|
|
37
|
-
};
|
|
38
|
-
})
|
|
39
|
-
.map((tab, _, arr) => ({ ...tab, icon: arr.every((t) => t.icon) ? tab.icon : undefined }));
|
|
40
|
-
}, [logError, options]);
|
|
41
|
-
}
|
|
42
|
-
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
43
|
-
//# sourceMappingURL=useNavOptions.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useNavOptions.js","sourceRoot":"","sources":["../../src/hooks/useNavOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,UAAU,aAAa,CAAsB,OAAwB;IACvE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO;YAAE,OAAO,EAAE,CAAC;QAExB,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/G,QAAQ,CACJ,YAAY,KAAK,IAAI,EACrB,+FAA+F,CAClG,CAAC;QAEF,OAAO,OAAO;aACT,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACZ,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;YAElC,IAAI,YAAY,EAAE,CAAC;gBACf,IAAI,GAAG,SAAS,CAAC;gBACjB,UAAU,GAAG,SAAS,CAAC;YAC3B,CAAC;YAED,IACI,UAAU;gBACV,mHAAmH;gBACnH,CAAC,CAAC,IAAI;oBACF,CAAC,WAAW,CAAC,UAAU,CAAC;oBACxB,gBAAgB,CAAC,UAAU,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,EACvE,CAAC;gBACC,UAAU,GAAG,SAAS,CAAC;YAC3B,CAAC;YAED,OAAO;gBACH,GAAG,MAAM;gBACT,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK;gBACnC,IAAI;gBACJ,UAAU;aACb,CAAC;QACN,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACnG,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5B,CAAC;AAsBD,sDAAsD"}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
2
|
-
|
|
3
|
-
import { getChildTypeName, isValidIcon } from '../utils/children';
|
|
4
|
-
import { useErrorLogger } from '../utils/errors';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* A utility hook used within navigation components. Returns options ready for use in a navigation component. Validates
|
|
8
|
-
* the icons and sets the icon and iconActive properties.
|
|
9
|
-
*
|
|
10
|
-
* @param options [NavOption[]] The options to display. Each option has a label and an optional leading icon.
|
|
11
|
-
* @returns {undefined} NavOption[] The options with the validated icon and iconActive properties set.
|
|
12
|
-
*/
|
|
13
|
-
export function useNavOptions<T extends NavOption>(options: T[] | undefined): T[] {
|
|
14
|
-
const { logError } = useErrorLogger();
|
|
15
|
-
|
|
16
|
-
return useMemo(() => {
|
|
17
|
-
if (!options) return [];
|
|
18
|
-
|
|
19
|
-
const iconsInvalid = options.some((o) => o.icon) ? !options.every((option) => isValidIcon(option.icon)) : null;
|
|
20
|
-
|
|
21
|
-
logError(
|
|
22
|
-
iconsInvalid === true,
|
|
23
|
-
'useNavOptions - Every option either must have a valid icon or none at all. All icons removed.',
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
return options
|
|
27
|
-
.map((option) => {
|
|
28
|
-
let { icon, iconActive } = option;
|
|
29
|
-
|
|
30
|
-
if (iconsInvalid) {
|
|
31
|
-
icon = undefined;
|
|
32
|
-
iconActive = undefined;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
if (
|
|
36
|
-
iconActive &&
|
|
37
|
-
// If the iconActive is not a valid icon or the iconActive is not a fill version of the icon, remove the iconActive
|
|
38
|
-
(!icon ||
|
|
39
|
-
!isValidIcon(iconActive) ||
|
|
40
|
-
getChildTypeName(iconActive) !== `${getChildTypeName(icon)}Fill`)
|
|
41
|
-
) {
|
|
42
|
-
iconActive = undefined;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return {
|
|
46
|
-
...option,
|
|
47
|
-
value: option.value || option.label,
|
|
48
|
-
icon,
|
|
49
|
-
iconActive,
|
|
50
|
-
};
|
|
51
|
-
})
|
|
52
|
-
.map((tab, _, arr) => ({ ...tab, icon: arr.every((t) => t.icon) ? tab.icon : undefined }));
|
|
53
|
-
}, [logError, options]);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
export type NavOption = {
|
|
57
|
-
/**
|
|
58
|
-
* The label of the option. This is the text that will be displayed on the option.
|
|
59
|
-
*
|
|
60
|
-
* @required
|
|
61
|
-
*/
|
|
62
|
-
label: string;
|
|
63
|
-
/**
|
|
64
|
-
* Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
|
|
65
|
-
*
|
|
66
|
-
* @default false
|
|
67
|
-
*/
|
|
68
|
-
disabled?: boolean;
|
|
69
|
-
/** The value of the option. If not provided, the label will be used as the value. */
|
|
70
|
-
value?: string;
|
|
71
|
-
/** The the icon to display before the label. */
|
|
72
|
-
icon?: React.ReactNode;
|
|
73
|
-
iconActive?: React.ReactNode;
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|