@zonos/amino 5.4.13 → 5.4.14
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/components/filter/filter-multi-select/FilterMultiSelect.d.ts +3 -3
- package/components/filter/filter-select/FilterSelect.d.ts +1 -1
- package/components/select/CountrySelect.d.ts +2 -2
- package/components/select/Select.d.ts +4 -4
- package/components/toggle/Toggle.d.ts +8 -3
- package/components/toggle/Toggle.js +1 -1
- package/package.json +1 -1
- package/types/SelectOption.d.ts +2 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type BaseFilterProps } from "../useFilterWrapper";
|
|
2
|
-
import type { SelectOption } from "../../../types/SelectOption";
|
|
3
|
-
export type FilterMultiSelectProps<T extends
|
|
2
|
+
import type { SelectOption, SelectValue } from "../../../types/SelectOption";
|
|
3
|
+
export type FilterMultiSelectProps<T extends SelectValue = SelectValue> = BaseFilterProps & {
|
|
4
4
|
options: SelectOption<T>[];
|
|
5
5
|
value: T[];
|
|
6
6
|
onChange: (value: T[]) => void;
|
|
7
7
|
};
|
|
8
|
-
export declare const FilterMultiSelect: <T extends
|
|
8
|
+
export declare const FilterMultiSelect: <T extends SelectValue = SelectValue>({ dropdownTitle, label, onChange, options, value, }: FilterMultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type BaseFilterProps } from "../useFilterWrapper";
|
|
2
2
|
import { type SelectProps } from "../../select/Select";
|
|
3
3
|
import type { SelectOption } from "../../../types/SelectOption";
|
|
4
|
-
type CustomSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = Omit<SelectProps<O>, 'onChange' | 'value' | 'options'>;
|
|
4
|
+
type CustomSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = Omit<SelectProps<T, O>, 'onChange' | 'value' | 'options'>;
|
|
5
5
|
export type FilterSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = BaseFilterProps & {
|
|
6
6
|
filterTextCharacterLimit?: number;
|
|
7
7
|
options: O[];
|
|
@@ -5,11 +5,11 @@ type CountrySelectType<T extends string> = {
|
|
|
5
5
|
autoFocus?: SelectProps['autoFocus'];
|
|
6
6
|
countryOptions: CountryOption<T>[];
|
|
7
7
|
label?: string;
|
|
8
|
-
onChange: SelectProps<CountryOption<T>>['onChange'];
|
|
8
|
+
onChange: SelectProps<T, CountryOption<T>>['onChange'];
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
value: T | null;
|
|
11
11
|
filter?: (country: CountryOption<T>) => boolean;
|
|
12
12
|
};
|
|
13
|
-
export type CountrySelectProps<T extends string = string> = CountrySelectType<T> & BaseProps & Omit<SelectProps<CountryOption<T>>, keyof CountrySelectType<T> | 'options'>;
|
|
13
|
+
export type CountrySelectProps<T extends string = string> = CountrySelectType<T> & BaseProps & Omit<SelectProps<T, CountryOption<T>>, keyof CountrySelectType<T> | 'options'>;
|
|
14
14
|
export declare const CountrySelect: <T extends string>({ autoFocus, countryOptions, filter, label, onChange, placeholder, value, ...props }: CountrySelectProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export {};
|
|
@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
import type { ActionMeta, GroupBase, Props, SelectComponentsConfig, StylesConfig } from 'react-select';
|
|
3
3
|
import type { HelpTextProps } from "../help-text/HelpText";
|
|
4
4
|
import type { BaseProps } from "../../types/BaseProps";
|
|
5
|
-
import type { SelectOption } from "../../types/SelectOption";
|
|
5
|
+
import type { SelectOption, SelectValue } from "../../types/SelectOption";
|
|
6
6
|
import type { Size } from "../../types/Size";
|
|
7
7
|
type RequiredProps = 'options' | 'value';
|
|
8
|
-
export type SelectProps<
|
|
8
|
+
export type SelectProps<V extends SelectValue = SelectValue, Option = SelectOption<V>, IsMulti extends false = false, Group extends GroupBase<Option> = GroupBase<Option>> = BaseProps & {
|
|
9
9
|
/** Close the select dropdown menu when scrolling outside of menu to prevent graphical jank */
|
|
10
10
|
closeOnOutsideScroll?: boolean;
|
|
11
11
|
components?: SelectComponentsConfig<Option, IsMulti, Group>;
|
|
@@ -22,12 +22,12 @@ export type SelectProps<Option extends SelectOption = SelectOption, IsMulti exte
|
|
|
22
22
|
/**
|
|
23
23
|
* An easier way to override the option rendering without having to use the typical component props and recreating all the styles.
|
|
24
24
|
*/
|
|
25
|
-
customOption?: (value:
|
|
25
|
+
customOption?: (value: V) => ReactNode;
|
|
26
26
|
/**
|
|
27
27
|
* @example
|
|
28
28
|
* onChange={changed => setExampleValue(changed?.value || null)}
|
|
29
29
|
*/
|
|
30
30
|
onChange: (changed: Option | null, actionMeta: ActionMeta<Option>) => void;
|
|
31
31
|
} & Omit<Props<Option, IsMulti, Group>, 'isMulti' | RequiredProps> & Required<Pick<Props<Option, IsMulti, Group>, RequiredProps>> & HelpTextProps;
|
|
32
|
-
export declare const Select: <Option extends SelectOption
|
|
32
|
+
export declare const Select: <V extends SelectValue, Option extends SelectOption<V>, Group extends GroupBase<Option> = GroupBase<Option>>({ isClearable, label, value, ...props }: SelectProps<V, Option, false, Group>) => import("react/jsx-runtime").JSX.Element;
|
|
33
33
|
export {};
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import type { BaseProps } from "../../types/BaseProps";
|
|
2
|
-
import type { SelectOption } from "../../types/SelectOption";
|
|
3
|
-
|
|
2
|
+
import type { SelectOption, SelectValue } from "../../types/SelectOption";
|
|
3
|
+
import type { Size } from "../../types/Size";
|
|
4
|
+
export type ToggleProps<TValue extends SelectValue = SelectValue> = BaseProps & {
|
|
4
5
|
/**
|
|
5
6
|
* If true, the toggle will take up the full width of its parent.
|
|
6
7
|
* @default false
|
|
7
8
|
*/
|
|
8
9
|
fullWidth?: boolean;
|
|
9
10
|
options: SelectOption<TValue>[];
|
|
11
|
+
/**
|
|
12
|
+
* @default 'sm'
|
|
13
|
+
*/
|
|
14
|
+
size?: Size;
|
|
10
15
|
value: TValue;
|
|
11
16
|
onChange: (value: TValue) => void;
|
|
12
17
|
};
|
|
13
|
-
export declare const Toggle: <TValue extends
|
|
18
|
+
export declare const Toggle: <TValue extends SelectValue>({ className, fullWidth, onChange, options, size, style, value, }: ToggleProps<TValue>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),l=require("clsx"),i=require("framer-motion"),n=require("../../style-inject.es-d4ddeae4.js");function
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),o=require("react/jsx-runtime"),r=require("react"),l=require("clsx"),i=require("framer-motion"),n=require("../../style-inject.es-d4ddeae4.js");function _(e){return e&&e.__esModule?e:{default:e}}var d=_(l),t="Amino_Toggle-module__shrinkWrapper--osh3J",a="Amino_Toggle-module__wrapper--NF4v5",p="Amino_Toggle-module__selectedSlider--WsUDo",u="Amino_Toggle-module__optionWrapper--0wrNp",m="Amino_Toggle-module__selected--badUt",g="Amino_Toggle-module__fullWidth--vw3dd";n.styleInject(".Amino_Toggle-module__shrinkWrapper--osh3J{display:inline-flex}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__wrapper--NF4v5{background-color:var(--amino-gray-50);border-radius:6px;display:flex;position:relative}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__selectedSlider--WsUDo{background-color:var(--amino-raised-surface-color);border-radius:6px;box-shadow:var(--amino-shadow-button-standard);height:100%;position:absolute;z-index:1}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp{border-radius:6px;color:var(--amino-text-color-secondary);cursor:pointer;font-size:var(--amino-font-size-base);font-weight:500;padding:4px 12px;text-align:center;z-index:2}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:focus{outline:none}.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp.Amino_Toggle-module__selected--badUt,.Amino_Toggle-module__shrinkWrapper--osh3J .Amino_Toggle-module__optionWrapper--0wrNp:hover:not(.Amino_Toggle-module__selected--badUt){color:var(--amino-text-color)}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd,.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5{width:100%}.Amino_Toggle-module__shrinkWrapper--osh3J.Amino_Toggle-module__fullWidth--vw3dd .Amino_Toggle-module__wrapper--NF4v5 .Amino_Toggle-module__optionWrapper--0wrNp{flex-grow:1}.Amino_Toggle-module__shrinkWrapper--osh3J.sm .Amino_Toggle-module__optionWrapper--0wrNp{padding:6px 12px}.Amino_Toggle-module__shrinkWrapper--osh3J.md .Amino_Toggle-module__optionWrapper--0wrNp{padding:10px 12px}.Amino_Toggle-module__shrinkWrapper--osh3J.lg .Amino_Toggle-module__optionWrapper--0wrNp{padding:14px}.Amino_Toggle-module__shrinkWrapper--osh3J.xl .Amino_Toggle-module__optionWrapper--0wrNp{padding:18px 16px}");exports.Toggle=function(l){var n=l.className,_=l.fullWidth,s=void 0!==_&&_,h=l.onChange,c=l.options,A=l.size,T=void 0===A?"sm":A,f=l.style,v=l.value,W=r.useRef(null),x=r.useRef(null),w=e.__read(r.useState({left:0,width:0}),2),N=w[0],k=w[1],b=e.__read(r.useState(!1),2),J=b[0],j=b[1];return r.useEffect((function(){var e,o,r=function(e,o){if(!o||!e)return{left:0,width:0};var r=o.width;return{left:o.left-e.left,width:r}}((null===(e=W.current)||void 0===e?void 0:e.getBoundingClientRect())||null,(null===(o=x.current)||void 0===o?void 0:o.getBoundingClientRect())||null);k(r)}),[v,T]),o.jsx("div",{className:d.default(n,t,s&&g,T),style:f,children:o.jsxs("div",{ref:W,className:a,children:[o.jsx(i.motion.div,{animate:{width:N.width,x:N.left},className:p,initial:!1,onAnimationComplete:function(){j(!0)},transition:{duration:J?.2:0}}),c.map((function(e){var r=e.value===v;return o.jsx("button",{ref:r?x:null,className:d.default([u,r&&m]),onClick:function(){return h(e.value)},type:"button",children:e.label},e.value)}))]})})};
|
package/package.json
CHANGED
package/types/SelectOption.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
|
-
export type
|
|
2
|
+
export type SelectValue = string | number | null;
|
|
3
|
+
export type SelectOption<V extends SelectValue = SelectValue> = {
|
|
3
4
|
icon?: ReactNode;
|
|
4
5
|
isDisabled?: boolean;
|
|
5
6
|
label: string;
|