You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
@asphalt-react/textfield
Advanced tools
@asphalt-react/textfield - npm Package Compare versions
Comparing version 2.4.0 to 2.5.0
| type Override<T, U> = Omit<U, keyof T> & T | ||
| interface SearchProps { | ||
| interface InputWrapperProps { | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| * React node | ||
| */ | ||
| children?: React.ReactNode | ||
| /** | ||
| * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Field matches the width of its container. | ||
| * Input matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Icon or text to render as start qualifier. Accepts SVG for icons. | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| qualifierStart?: React.ReactElement | string | ||
| invalid?: boolean | ||
| /** | ||
| * Icon or text to render as end qualifier. Accepts SVG for icons. | ||
| * Removes the spacing between its children. | ||
| */ | ||
| qualifierEnd?: React.ReactElement | string | ||
| shrink?: boolean | ||
| /** | ||
| * React node to render before the field content. | ||
| * Adds padding in the container. | ||
| */ | ||
| addOnStart?: React.ReactElement | ||
| bezel?: boolean | ||
| /** | ||
| * React node to render after the field content. | ||
| * Makes field non interactive. | ||
| */ | ||
| addOnEnd?: React.ReactElement | ||
| disabled?: boolean | ||
| /** | ||
| * Swap the slots for qualifiers and addOns. | ||
| * Set this props to true if stretch is true and there is a qualifier/addOn at the end. | ||
| */ | ||
| swapSlots?: boolean | ||
| /** | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| invalid?: boolean | ||
| /** | ||
| * Makes the field disabled if true. | ||
| */ | ||
| disabled?: boolean | ||
| hasEndSlot?: boolean | ||
| } | ||
| declare function Search( | ||
| props: Override<SearchProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function InputWrapper( | ||
| props: Override< | ||
| InputWrapperProps, | ||
| React.InputHTMLAttributes<HTMLInputElement> | ||
| > | ||
| ): JSX.Element | ||
| interface DatefieldProps { | ||
| interface URLProps { | ||
| /** | ||
@@ -85,11 +84,11 @@ * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| declare function Datefield( | ||
| props: Override<DatefieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function URL( | ||
| props: Override<URLProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface FieldProps { | ||
| interface PhoneNumberProps { | ||
| /** | ||
| * Type of input control. | ||
| * Controls size of the field. Accepts s, m, l for extra small, small, medium & large. | ||
| */ | ||
| type?: string | ||
| size?: "s" | "m" | "l" | ||
| /** | ||
@@ -100,20 +99,68 @@ * Adds error styles to the field if true. | ||
| /** | ||
| * Input matches the width of its container. | ||
| * Makes the field disabled if true. | ||
| */ | ||
| disabled?: boolean | ||
| /** | ||
| * Field matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Makes field non interactive. | ||
| * Show custom node when no result is found. | ||
| */ | ||
| disabled?: boolean | ||
| emptyResult?: string | ||
| /** | ||
| * className | ||
| * Hint text to show in input field. | ||
| */ | ||
| className?: string | ||
| placeholder?: string | ||
| /** | ||
| * Hint text to show in search input field. | ||
| */ | ||
| searchPlaceholder?: string | ||
| /** | ||
| * Show country flag in option and button. | ||
| */ | ||
| showFlag?: boolean | ||
| /** | ||
| * Array of country objects. | ||
| * | ||
| * ```js | ||
| * { | ||
| * id: "+62", | ||
| * name: "Indonesia", | ||
| * flag: "https://www.url.co.id/indonesia-flag.svg" | ||
| * initialSelected: false // true if this item should be initially selected | ||
| * } | ||
| * ``` | ||
| * | ||
| * Out of the above `id` and `name` is required. | ||
| */ | ||
| countries?: { | ||
| id: string | ||
| name: string | ||
| flag?: string | React.ReactNode | ||
| initialSelected?: boolean | ||
| }[] | ||
| /** | ||
| * Add default country. By add this props the selection will disabled. | ||
| */ | ||
| defaultCountry?: string | ||
| /** | ||
| * Callback to handle the country selection and input field. | ||
| * It has the following signature | ||
| * | ||
| * - countryCode - country code selected by user interaction | ||
| * - inputValue - input value from user | ||
| * | ||
| * ```js | ||
| * ({countryCode, inputValue}, { event }) => {} | ||
| * ``` | ||
| */ | ||
| onChange?: (...args: any[]) => any | ||
| } | ||
| declare function Field( | ||
| props: Override<FieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function PhoneNumber( | ||
| props: Override<PhoneNumberProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface InputAddOnProps { | ||
| interface InputQualifierProps { | ||
| /** | ||
@@ -123,44 +170,62 @@ * React node for the main content. | ||
| children: React.ReactNode | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| } | ||
| declare function InputAddOn( | ||
| props: Override<InputAddOnProps, React.HTMLAttributes<HTMLElement>> | ||
| declare function InputQualifier( | ||
| props: Override<InputQualifierProps, React.HTMLAttributes<HTMLElement>> | ||
| ): JSX.Element | ||
| interface InputProps { | ||
| /** | ||
| * Type of input control. | ||
| */ | ||
| type?: string | ||
| /** | ||
| * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Input matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| interface UseInputProp { | ||
| /* Sets the size of the input (e.g., "xs", "s", "m", "l"). */ | ||
| size?: string | ||
| /* Marks the input as invalid when true. */ | ||
| invalid?: boolean | ||
| /** | ||
| * Makes field non interactive. | ||
| */ | ||
| /* Disables the input when true. */ | ||
| disabled?: boolean | ||
| /* Stretches the input to fill its container when true. */ | ||
| stretch?: boolean | ||
| /* Shrinks the input to fit its content when true. */ | ||
| shrink?: boolean | ||
| /* Displays content as a qualifier at the start of the input. */ | ||
| qualifierStart?: React.ReactNode | ||
| /* Displays content as a qualifier at the end of the input. */ | ||
| qualifierEnd?: React.ReactNode | ||
| /* Displays content as an add-on at the start of the input. */ | ||
| addOnStart?: React.ReactNode | ||
| /* Displays content as an add-on at the end of the input. */ | ||
| addOnEnd?: React.ReactNode | ||
| /* Swaps the positions of qualifiers and add-ons when true. */ | ||
| swapSlots?: boolean | ||
| } | ||
| interface UseInputReturn { | ||
| /* Returns props for the input element. */ | ||
| getInputProps: Function | ||
| /* Returns props for the input wrapper element. */ | ||
| getWrapperProps: Function | ||
| /* Returns props for the qualifier elements. */ | ||
| getQualifierProps: Function | ||
| /* Returns the start slots (qualifier/add-on) for the input. */ | ||
| getStartSlots: Function | ||
| /* Returns the end slots (qualifier/add-on) for the input. */ | ||
| getEndSlots: Function | ||
| } | ||
| declare function useInput(props: UseInputProp): UseInputReturn | ||
| interface InputAddOnProps { | ||
| /** | ||
| * Add border on each sides | ||
| * React node for the main content. | ||
| */ | ||
| enclosed?: boolean | ||
| /** | ||
| * Adds padding on each sides | ||
| */ | ||
| bezel?: boolean | ||
| children: React.ReactNode | ||
| } | ||
| declare function Input( | ||
| props: Override<InputProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function InputAddOn( | ||
| props: Override<InputAddOnProps, React.HTMLAttributes<HTMLElement>> | ||
| ): JSX.Element | ||
| interface PasswordProps { | ||
| interface DatefieldProps { | ||
| /** | ||
@@ -188,4 +253,2 @@ * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| * React node to render after the field content. | ||
| * | ||
| * > This will override the default show/hide toggle button | ||
| */ | ||
@@ -207,8 +270,35 @@ addOnEnd?: React.ReactElement | ||
| declare function Password( | ||
| props: Override<PasswordProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Datefield( | ||
| props: Override<DatefieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface EmailProps { | ||
| interface FieldProps { | ||
| /** | ||
| * Type of input control. | ||
| */ | ||
| type?: string | ||
| /** | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| invalid?: boolean | ||
| /** | ||
| * Input matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Makes field non interactive. | ||
| */ | ||
| disabled?: boolean | ||
| /** | ||
| * className | ||
| */ | ||
| className?: string | ||
| } | ||
| declare function Field( | ||
| props: Override<FieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface SearchProps { | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
@@ -251,7 +341,7 @@ */ | ||
| declare function Email( | ||
| props: Override<EmailProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Search( | ||
| props: Override<SearchProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface URLProps { | ||
| interface PinfieldProps { | ||
| /** | ||
@@ -266,9 +356,9 @@ * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| /** | ||
| * Icon or text to render as start qualifier. Accepts SVG for icons. | ||
| * Icon to render as start qualifier, accepts SVG. | ||
| */ | ||
| qualifierStart?: React.ReactElement | string | ||
| qualifierStart?: React.ReactElement | ||
| /** | ||
| * Icon or text to render as end qualifier. Accepts SVG for icons. | ||
| * Icon to render as end qualifier, accepts SVG. | ||
| */ | ||
| qualifierEnd?: React.ReactElement | string | ||
| qualifierEnd?: React.ReactElement | ||
| /** | ||
@@ -294,66 +384,21 @@ * React node to render before the field content. | ||
| disabled?: boolean | ||
| } | ||
| declare function URL( | ||
| props: Override<URLProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface InputQualifierProps { | ||
| /** | ||
| * React node for the main content. | ||
| * Number of characters allowed in the field. | ||
| */ | ||
| children: React.ReactNode | ||
| length?: number | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| * Aligns the input content in center. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| } | ||
| declare function InputQualifier( | ||
| props: Override<InputQualifierProps, React.HTMLAttributes<HTMLElement>> | ||
| ): JSX.Element | ||
| interface InputWrapperProps { | ||
| alignCenter?: boolean | ||
| /** | ||
| * React node | ||
| * Placeholder value to show in the field. | ||
| */ | ||
| children?: React.ReactNode | ||
| /** | ||
| * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Input matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| invalid?: boolean | ||
| /** | ||
| * Removes the spacing between its children. | ||
| */ | ||
| shrink?: boolean | ||
| /** | ||
| * Adds padding in the container. | ||
| */ | ||
| bezel?: boolean | ||
| /** | ||
| * Makes field non interactive. | ||
| */ | ||
| disabled?: boolean | ||
| /** | ||
| * Set this props to true if stretch is true and there is a qualifier/addOn at the end. | ||
| */ | ||
| hasEndSlot?: boolean | ||
| placeholder?: string | ||
| } | ||
| declare function InputWrapper( | ||
| props: Override< | ||
| InputWrapperProps, | ||
| React.InputHTMLAttributes<HTMLInputElement> | ||
| > | ||
| declare function Pinfield( | ||
| props: Override<PinfieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface NumericProps { | ||
| interface TimefieldProps { | ||
| /** | ||
@@ -397,36 +442,20 @@ * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| declare function Numeric( | ||
| props: Override<NumericProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Timefield( | ||
| props: Override<TimefieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface PinfieldProps { | ||
| interface InputProps { | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| * Type of input control. | ||
| */ | ||
| type?: string | ||
| /** | ||
| * Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Field matches the width of its container. | ||
| * Input matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Icon to render as start qualifier, accepts SVG. | ||
| */ | ||
| qualifierStart?: React.ReactElement | ||
| /** | ||
| * Icon to render as end qualifier, accepts SVG. | ||
| */ | ||
| qualifierEnd?: React.ReactElement | ||
| /** | ||
| * React node to render before the field content. | ||
| */ | ||
| addOnStart?: React.ReactElement | ||
| /** | ||
| * React node to render after the field content. | ||
| */ | ||
| addOnEnd?: React.ReactElement | ||
| /** | ||
| * Swap the slots for qualifiers and addOns. | ||
| */ | ||
| swapSlots?: boolean | ||
| /** | ||
| * Adds error styles to the field if true. | ||
@@ -436,24 +465,20 @@ */ | ||
| /** | ||
| * Makes the field disabled if true. | ||
| * Makes field non interactive. | ||
| */ | ||
| disabled?: boolean | ||
| /** | ||
| * Number of characters allowed in the field. | ||
| * Add border on each sides | ||
| */ | ||
| length?: number | ||
| enclosed?: boolean | ||
| /** | ||
| * Aligns the input content in center. | ||
| * Adds padding on each sides | ||
| */ | ||
| alignCenter?: boolean | ||
| /** | ||
| * Placeholder value to show in the field. | ||
| */ | ||
| placeholder?: string | ||
| bezel?: boolean | ||
| } | ||
| declare function Pinfield( | ||
| props: Override<PinfieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Input( | ||
| props: Override<InputProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface TimefieldProps { | ||
| interface EmailProps { | ||
| /** | ||
@@ -497,4 +522,4 @@ * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| declare function Timefield( | ||
| props: Override<TimefieldProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Email( | ||
| props: Override<EmailProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
@@ -567,8 +592,34 @@ | ||
| interface PhoneNumberProps { | ||
| interface PasswordProps { | ||
| /** | ||
| * Controls size of the field. Accepts s, m, l for extra small, small, medium & large. | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "s" | "m" | "l" | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Field matches the width of its container. | ||
| */ | ||
| stretch?: boolean | ||
| /** | ||
| * Icon or text to render as start qualifier. Accepts SVG for icons. | ||
| */ | ||
| qualifierStart?: React.ReactElement | string | ||
| /** | ||
| * Icon or text to render as end qualifier. Accepts SVG for icons. | ||
| */ | ||
| qualifierEnd?: React.ReactElement | string | ||
| /** | ||
| * React node to render before the field content. | ||
| */ | ||
| addOnStart?: React.ReactElement | ||
| /** | ||
| * React node to render after the field content. | ||
| * | ||
| * > This will override the default show/hide toggle button | ||
| */ | ||
| addOnEnd?: React.ReactElement | ||
| /** | ||
| * Swap the slots for qualifiers and addOns. | ||
| */ | ||
| swapSlots?: boolean | ||
| /** | ||
| * Adds error styles to the field if true. | ||
@@ -581,3 +632,14 @@ */ | ||
| disabled?: boolean | ||
| } | ||
| declare function Password( | ||
| props: Override<PasswordProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| interface NumericProps { | ||
| /** | ||
| * Controls size of the field. Accepts xs, s, m, l for extra small, small, medium & large. | ||
| */ | ||
| size?: "xs" | "s" | "m" | "l" | ||
| /** | ||
| * Field matches the width of its container. | ||
@@ -587,59 +649,35 @@ */ | ||
| /** | ||
| * Show custom node when no result is found. | ||
| * Icon or text to render as start qualifier. Accepts SVG for icons. | ||
| */ | ||
| emptyResult?: string | ||
| qualifierStart?: React.ReactElement | string | ||
| /** | ||
| * Hint text to show in input field. | ||
| * Icon or text to render as end qualifier. Accepts SVG for icons. | ||
| */ | ||
| placeholder?: string | ||
| qualifierEnd?: React.ReactElement | string | ||
| /** | ||
| * Hint text to show in search input field. | ||
| * React node to render before the field content. | ||
| */ | ||
| searchPlaceholder?: string | ||
| addOnStart?: React.ReactElement | ||
| /** | ||
| * Show country flag in option and button. | ||
| * React node to render after the field content. | ||
| */ | ||
| showFlag?: boolean | ||
| addOnEnd?: React.ReactElement | ||
| /** | ||
| * Array of country objects. | ||
| * | ||
| * ```js | ||
| * { | ||
| * id: "+62", | ||
| * name: "Indonesia", | ||
| * flag: "https://www.url.co.id/indonesia-flag.svg" | ||
| * initialSelected: false // true if this item should be initially selected | ||
| * } | ||
| * ``` | ||
| * | ||
| * Out of the above `id` and `name` is required. | ||
| * Swap the slots for qualifiers and addOns. | ||
| */ | ||
| countries?: { | ||
| id: string | ||
| name: string | ||
| flag?: string | React.ReactNode | ||
| initialSelected?: boolean | ||
| }[] | ||
| swapSlots?: boolean | ||
| /** | ||
| * Add default country. By add this props the selection will disabled. | ||
| * Adds error styles to the field if true. | ||
| */ | ||
| defaultCountry?: string | ||
| invalid?: boolean | ||
| /** | ||
| * Callback to handle the country selection and input field. | ||
| * It has the following signature | ||
| * | ||
| * - countryCode - country code selected by user interaction | ||
| * - inputValue - input value from user | ||
| * | ||
| * ```js | ||
| * ({countryCode, inputValue}, { event }) => {} | ||
| * ``` | ||
| * Makes the field disabled if true. | ||
| */ | ||
| onChange?: (...args: any[]) => any | ||
| disabled?: boolean | ||
| } | ||
| declare function PhoneNumber( | ||
| props: Override<PhoneNumberProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| declare function Numeric( | ||
| props: Override<NumericProps, React.InputHTMLAttributes<HTMLInputElement>> | ||
| ): JSX.Element | ||
| export { Datefield, type DatefieldProps, Email, type EmailProps, Field, type FieldProps, Input, InputAddOn, type InputAddOnProps, type InputProps, InputQualifier, type InputQualifierProps, InputWrapper, type InputWrapperProps, Numeric, type NumericProps, Password, type PasswordProps, PhoneNumber, type PhoneNumberProps, Pinfield, type PinfieldProps, Search, type SearchProps, Textfield, type TextfieldProps, Timefield, type TimefieldProps, URL, type URLProps }; | ||
| export { Datefield, type DatefieldProps, Email, type EmailProps, Field, type FieldProps, Input, InputAddOn, type InputAddOnProps, type InputProps, InputQualifier, type InputQualifierProps, InputWrapper, type InputWrapperProps, Numeric, type NumericProps, Password, type PasswordProps, PhoneNumber, type PhoneNumberProps, Pinfield, type PinfieldProps, Search, type SearchProps, Textfield, type TextfieldProps, Timefield, type TimefieldProps, URL, type URLProps, useInput }; |
@@ -51,5 +51,5 @@ import React, { forwardRef, useState, useRef, useMemo } from 'react'; | ||
| var css_248z$4 = ".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background-color: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n"; | ||
| var css_248z$4 = ".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n"; | ||
| var commonStyles = {"Base":"Base__iUqlA","disabled":"disabled__FTNVe","borderless":"borderless__6cr-3","baseLineHeight":"baseLineHeight__-JUTS","wrapper":"wrapper__qkcx5","shrink":"shrink__Zoj2j","bezel":"bezel__3WJlH","lFont":"lFont__vnnwV","lSize":"lSize__ZAxqS","mFont":"mFont__LDr6S","mSize":"mSize__yn6oo","sFont":"sFont__a0yJl","sSize":"sSize__nOg4a","inputXs":"inputXs__Jyc1b","xsFont":"xsFont__ZoXFc","xsSize":"xsSize__WjaAR","bezelless":"bezelless__XoxCA","invalid":"invalid__u91uf","stretch":"stretch__0iX7B","stretchQualifierEnd":"stretchQualifierEnd__UOR-y","multiline":"multiline__DunvT","extentLow":"extentLow__oeiSb","extentMid":"extentMid__6-yRR","extentHigh":"extentHigh__gcgQv","resizeHorizontal":"resizeHorizontal__27RH8","resizeVertical":"resizeVertical__DTfPJ"}; | ||
| var stylesheet$4=".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background-color: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n"; | ||
| var stylesheet$4=".Base__iUqlA {\n /* default custom properties */\n --surface-color: var(--interactive-surface-primary-default, #ffffff);\n --font-color: var(--content-primary, #2d2e34);\n --placeholder-color: var(--content-muted, #8e919b);\n --border-color: var(--interactive-default, #cbcfd7);\n --border-radius: var(--roundness-user-input-M, 0.375rem);\n --focus-appearance: var(--focus-outline, 2px solid);\n --focus-color: var(--interactive-focus, #86afff);\n --focus: var(--focus-appearance) var(--focus-color);\n\n background: var(--surface-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n color: var(--font-color);\n font: var(--font);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.Base__iUqlA:focus-visible {\n outline: var(--focus);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:hover {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.Base__iUqlA:active {\n --border-color: var(--interactive-active, #1c3abb);\n}\n\n.Base__iUqlA::-moz-placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA::placeholder {\n color: var(--placeholder-color);\n}\n\n.Base__iUqlA:disabled,\n.disabled__FTNVe,\n.disabled__FTNVe:hover,\n.disabled__FTNVe:active,\n.disabled__FTNVe:focus-visible,\n.Base__iUqlA:hover .disabled__FTNVe {\n --border-color: var(--interactive-disabled, #eaecf0);\n --surface-color: var(--interactive-surface-disabled, #f1f3f6);\n --font-color: var(--content-disabled, #9a9eaa);\n -webkit-text-fill-color: var(--content-disabled, #9a9eaa);\n /* override Safari disabled input font color */\n cursor: not-allowed;\n outline: none;\n}\n\n@supports not selector(:focus-visible) {\n .Base__iUqlA:focus {\n outline: var(--focus);\n }\n\n .borderless__6cr-3:focus {\n outline: none;\n }\n}\n\n.baseLineHeight__-JUTS {\n line-height: 1;\n}\n\n.wrapper__qkcx5 {\n display: inline-grid;\n grid-auto-flow: column;\n align-items: center;\n gap: 1rem;\n}\n\n.wrapper__qkcx5:hover .Base__iUqlA {\n --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n}\n\n.wrapper__qkcx5:has(:is(.Base__iUqlA):focus):focus-within {\n outline: var(--focus);\n}\n\n.shrink__Zoj2j {\n gap: 0;\n}\n\n.bezel__3WJlH {\n padding-inline: 1rem;\n}\n\n/** size classes */\n\n.lFont__vnnwV {\n --font: var(\n --text-regular-L,\n 500 1.125rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.lSize__ZAxqS {\n padding: 1.1875rem 1rem;\n max-height: 56px;\n}\n\n.wrapper__qkcx5 > .lSize__ZAxqS {\n max-height: 54px;\n}\n\n.mFont__LDr6S {\n --font: var(\n --text-regular-M,\n 500 1rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.mSize__yn6oo {\n padding: 1rem 1rem;\n max-height: 48px;\n}\n\n.wrapper__qkcx5 > .mSize__yn6oo {\n max-height: 46px;\n}\n\n.sFont__a0yJl {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.sSize__nOg4a {\n padding: 0.8125rem 1rem;\n max-height: 40px;\n}\n\n.inputXs__Jyc1b {\n margin: -0.6875rem 0;\n}\n\n.wrapper__qkcx5 > .sSize__nOg4a {\n max-height: 38px;\n}\n\n.xsFont__ZoXFc {\n --font: var(\n --text-regular-S,\n 500 0.875rem/1.618 Maison Neue,\n Helvetica,\n Open Sans,\n sans-serif\n );\n}\n\n.xsSize__WjaAR {\n padding: 0.6875rem 1rem;\n max-height: 36px;\n}\n\n.wrapper__qkcx5 > .xsSize__WjaAR {\n max-height: 34px;\n}\n\n.borderless__6cr-3 {\n border: none;\n outline: none;\n}\n\n.borderless__6cr-3:focus-visible {\n outline: none;\n}\n\n.bezelless__XoxCA {\n padding-left: 0;\n padding-right: 0;\n}\n\n.invalid__u91uf {\n border-color: var(--interactive-invalid, #ec4453);\n /* firefox gives default box-shadow for invalid inputs */\n box-shadow: none;\n}\n\n.stretch__0iX7B {\n width: 100%;\n min-width: unset;\n grid-template-columns: auto 1fr;\n}\n\n.stretchQualifierEnd__UOR-y {\n width: 100%;\n min-width: unset;\n grid-template-columns: 1fr auto;\n}\n\n.multiline__DunvT {\n --border-radius: var(--roundness-user-input-L, 0.375rem);\n padding: 1rem;\n max-height: initial;\n height: var(--extent);\n}\n\n.extentLow__oeiSb {\n --extent: 76px;\n}\n\n.extentMid__6-yRR {\n --extent: 92px;\n}\n\n.extentHigh__gcgQv {\n --extent: 108px;\n}\n\n.resizeHorizontal__27RH8 {\n resize: horizontal;\n}\n\n.resizeVertical__DTfPJ {\n resize: vertical;\n}\n"; | ||
| styleInject(css_248z$4); | ||
@@ -81,3 +81,3 @@ | ||
| function useInput({size,invalid,disabled,stretch,shrink,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots}){const getStartSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnStart||qualifierStart)){return null}const addOn=addOnStart?React.createElement(InputAddOn,addOnProps,addOnStart):null;const qualifier=qualifierStart?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierStart):null;if(swapSlots){return React.createElement(React.Fragment,null,qualifier,addOn)}return React.createElement(React.Fragment,null,addOn,qualifier)};const getEndSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnEnd||qualifierEnd)){return null}const addOn=addOnEnd?React.createElement(InputAddOn,addOnProps,addOnEnd):null;const qualifier=qualifierEnd?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierEnd):null;if(swapSlots){return React.createElement(React.Fragment,null,addOn,qualifier)}return React.createElement(React.Fragment,null,qualifier,addOn)};const hasEndSlot=()=>{if(!qualifierStart&&!addOnStart&&(qualifierEnd||addOnEnd)){return true}return false};return {getInputProps:()=>{return {size,invalid,disabled,stretch}},getWrapperProps:()=>{return {size,invalid,disabled,stretch,shrink,hasEndSlot:hasEndSlot()}},getQualifierProps:()=>{return {size}},getStartSlots,getEndSlots}} | ||
| const useInput=({size,invalid,disabled,stretch,shrink,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots})=>{const getStartSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnStart||qualifierStart)){return null}const addOn=addOnStart?React.createElement(InputAddOn,addOnProps,addOnStart):null;const qualifier=qualifierStart?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierStart):null;if(swapSlots){return React.createElement(React.Fragment,null,qualifier,addOn)}return React.createElement(React.Fragment,null,addOn,qualifier)};const getEndSlots=({qualifierProps,addOnProps}={})=>{if(!(addOnEnd||qualifierEnd)){return null}const addOn=addOnEnd?React.createElement(InputAddOn,addOnProps,addOnEnd):null;const qualifier=qualifierEnd?React.createElement(InputQualifier,_extends({size:size},qualifierProps),qualifierEnd):null;if(swapSlots){return React.createElement(React.Fragment,null,addOn,qualifier)}return React.createElement(React.Fragment,null,qualifier,addOn)};const hasEndSlot=()=>{if(!qualifierStart&&!addOnStart&&(qualifierEnd||addOnEnd)){return true}return false};return {getInputProps:()=>{return {size,invalid,disabled,stretch}},getWrapperProps:()=>{return {size,invalid,disabled,stretch,shrink,hasEndSlot:hasEndSlot()}},getQualifierProps:()=>{return {size}},getStartSlots,getEndSlots}}; | ||
@@ -112,4 +112,4 @@ const{concatClasses: concatClasses$1}=propsUtil;const Textfield=forwardRef(({size="m",stretch=false,qualifierEnd=null,qualifierStart=null,addOnEnd=null,addOnStart=null,multiline=false,invalid=false,swapSlots=false,extent="low",disabled=false,resizeVertical=true,resizeHorizontal=true,...props},ref)=>{sendStyles(stylesheet$4);const{style,className,...fieldProps}=props;if(multiline){const{rows,cols,...multilineProps}=fieldProps;const extentClass=concatClasses$1("extent",resolveExtentProp(extent));const fontClass=concatClasses$1(resolveSizeProp(size),"font");const sizeClass=concatClasses$1(resolveSizeProp(size),"size");return React.createElement("textarea",_extends({},multilineProps,{disabled:disabled,ref:ref,className:cn(commonStyles.Base,commonStyles[fontClass],commonStyles[sizeClass],{[commonStyles.invalid]:invalid},{[commonStyles.stretch]:stretch},{[commonStyles.multiline]:multiline},{[commonStyles.resizeHorizontal]:multiline&&!resizeVertical},{[commonStyles.resizeVertical]:multiline&&!resizeHorizontal},commonStyles[extentClass])}))}const{getWrapperProps,getInputProps,getStartSlots,getEndSlots}=useInput({size,stretch,invalid,disabled,qualifierStart,qualifierEnd,addOnStart,addOnEnd,swapSlots});const isSlotsEmpty=!(qualifierStart||qualifierEnd||addOnStart||addOnEnd);if(isSlotsEmpty){return React.createElement(Input,_extends({},fieldProps,getInputProps(),{ref:ref}))}return React.createElement(InputWrapper,getWrapperProps(),React.createElement(React.Fragment,null,getStartSlots()),React.createElement(Input,_extends({},fieldProps,getInputProps(),{ref:ref,enclosed:false,bezel:false})),React.createElement(React.Fragment,null,getEndSlots()))});Textfield.displayName="Textfield";Textfield.propTypes={size:PropTypes.oneOf(["xs","s","m","l"]),stretch:PropTypes.bool,multiline:PropTypes.bool,qualifierStart:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),addOnStart:PropTypes.element,addOnEnd:PropTypes.element,swapSlots:PropTypes.bool,extent:PropTypes.oneOf(["low","mid","high"]),invalid:PropTypes.bool,disabled:PropTypes.bool,resizeHorizontal:PropTypes.bool,resizeVertical:PropTypes.bool};Textfield.defaultProps={size:"m",stretch:false,multiline:false,qualifierStart:null,qualifierEnd:null,addOnStart:null,addOnEnd:null,swapSlots:false,extent:"low",invalid:false,disabled:false,resizeHorizontal:true,resizeVertical:true}; | ||
| const PhoneNumber=forwardRef(({size="m",invalid=false,disabled=false,stretch=false,emptyResult,placeholder,searchPlaceholder="Search Country",showFlag=false,countries,defaultCountry="",onChange,...props},ref)=>{sendStyles(stylesheet);const{style,className,...rest}=props;const inputRef=useRef(null);const inputPhoneRef=useRef(ref);const[inputValue,setInputValue]=useState("");const[phoneNumber,setInputPhoneNumber]=useState("");const resolvedSize=resolveSizeProp(size);const onInputChange=value=>setInputValue(value||"");const onItemChange=currentSelection=>{onChange?.({countryCode:currentSelection.id,inputValue:phoneNumber},{event});setInputValue("");inputPhoneRef?.current?.focus();};const{isOpen,filteredItems,highlightedIndex,selectedItems,getToggleButtonProps,getMenuProps,getItemProps,getInputProps}=useSelection({items:countries,displayKey:["name","id"],filter:true,onChange,inputValue,typeahead:true,onInputChange,onItemChange,standaloneSearch:true});const{getTargetProps,getPopoverProps}=usePopover({open:isOpen,placement:"bottom-start",size:resolvedSize,flip:true,bezel:false,stretch:true});const{getWrapperProps,getInputProps:phoneInputProps}=useInput({size:resolvedSize,stretch:true,invalid,disabled});const isItemSelected=item=>selectedItems.length>0&&matches(selectedItems[0],item);const selectedItem=selectedItems[0]||countries.find(item=>item.initialSelected);const handlePhoneNumberChange=event=>{const value=event.target.value;const countryCode=defaultCountry||selectedItems[0].id;onChange?.({countryCode,inputValue:value},{event});setInputPhoneNumber(value);};const renderListItem=({item})=>React.createElement(ListItemContent,{size:resolvedSize,disabled:disabled,addOnStart:showFlag?item.flag:null},item.name," (",item.id,")");const renderValue=()=>{if(!selectedItem)return null;return showFlag?React.createElement("span",{className:cn(styles.withFlag)},selectedItem.flag,React.createElement("span",{className:cn(styles.countryCode)},selectedItem.id)):selectedItem.id};const renderEmptyValue=()=>React.createElement("div",{className:cn(styles.emptyResult,styles[resolvedSize])},emptyResult?emptyResult:React.createElement(React.Fragment,null,React.createElement(Icontuner,{size:resolvedSize},React.createElement(Search$1,null)),"No search result found"));const handleCross=()=>{setInputValue("");inputRef?.current?.focus();};const inputProps=getInputProps({ref:inputRef,disabled,onClick:e=>e.stopPropagation()});const toggleButtonProps=useMemo(()=>{return {...rest,...getToggleButtonProps({disabled})}},[getToggleButtonProps,disabled]);const phoneClasses=cn(styles.PhoneNumber,{[styles.stretch]:stretch});return React.createElement("div",{className:phoneClasses,"aria-disabled":disabled},React.createElement(InputWrapper,getWrapperProps(),React.createElement(InputAddOn,null,defaultCountry?React.createElement("div",{className:cn(styles.defaultText,styles[resolvedSize]),"aria-label":`Country code: ${defaultCountry}`},defaultCountry):React.createElement("div",_extends({},getTargetProps(),{className:cn(styles.target)}),React.createElement("div",_extends({},toggleButtonProps,{className:cn(styles.selectionButton,styles[resolvedSize]),role:"button"}),React.createElement(Button,{tabIndex:disabled?-1:0,nude:true,compact:true,system:true,qualifier:isOpen?React.createElement(CaretUp,null):React.createElement(CaretDown,null),qualifierEnd:true,disabled:disabled,size:resolvedSize},renderValue()))),React.createElement("span",{className:cn(styles.separator)})),React.createElement(Input,_extends({},rest,phoneInputProps(),{size:resolvedSize,stretch:stretch,ref:inputPhoneRef,enclosed:false,bezel:false,type:"text",onInput:handlePhoneNumberChange,placeholder:placeholder}))),React.createElement(BasePopover,_extends({},getPopoverProps(),{open:isOpen}),React.createElement(ListBox,_extends({},getMenuProps({},{suppressRefError:true}),{size:resolvedSize}),React.createElement("div",{className:cn(styles.popoverSearch)},React.createElement(Search,_extends({},inputProps,{size:resolvedSize,placeholder:searchPlaceholder,stretch:true,addOnEnd:React.createElement(Button,{size:resolvedSize,nude:true,system:true,icon:true,compact:true,type:"button",onClick:handleCross},React.createElement(Cross,null))}))),React.createElement("div",{className:cn(styles.listWrapper,styles[resolvedSize])},filteredItems.length===0?renderEmptyValue():filteredItems.map((item,index)=>React.createElement(ListItem,_extends({},getItemProps({item,index}),{key:`${item.id}-${index}`,highlight:!disabled&&highlightedIndex===index,selected:!disabled&&isItemSelected(item),size:resolvedSize,disabled:disabled}),renderListItem({item})))))))});PhoneNumber.displayName="PhoneNumber";PhoneNumber.propTypes={size:PropTypes.oneOf(["s","m","l"]),invalid:PropTypes.bool,disabled:PropTypes.bool,stretch:PropTypes.bool,emptyResult:PropTypes.string,placeholder:PropTypes.string,searchPlaceholder:PropTypes.string,showFlag:PropTypes.bool,countries:PropTypes.arrayOf(PropTypes.shape({id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,flag:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),initialSelected:PropTypes.bool}).isRequired),defaultCountry:PropTypes.string,onChange:PropTypes.func}; | ||
| const PhoneNumber=forwardRef(({size="m",invalid=false,disabled=false,stretch=false,emptyResult,placeholder,searchPlaceholder="Search Country",showFlag=false,countries,defaultCountry="",onChange,...props},ref)=>{sendStyles(stylesheet);const{style,className,...rest}=props;const inputRef=useRef(null);const inputPhoneRef=useRef(ref);const[inputValue,setInputValue]=useState("");const[phoneNumber,setInputPhoneNumber]=useState("");const resolvedSize=resolveSizeProp(size);const onInputChange=value=>setInputValue(value||"");const onItemChange=currentSelection=>{onChange?.({countryCode:currentSelection.id,inputValue:phoneNumber},{event});setInputValue("");inputPhoneRef?.current?.focus();};const{isOpen,filteredItems,highlightedIndex,selectedItems,getToggleButtonProps,getMenuProps,getItemProps,getInputProps}=useSelection({items:countries,displayKey:["name","id"],filter:true,onChange,inputValue,typeahead:true,onInputChange,onItemChange,standaloneSearch:true});const{getTargetProps,getPopoverProps}=usePopover({open:isOpen,placement:"bottom-start",size:resolvedSize,flip:true,bezel:false,stretch:true});const{getWrapperProps,getInputProps:phoneInputProps}=useInput({size:resolvedSize,stretch:true,invalid,disabled});const isItemSelected=item=>selectedItems.length>0&&matches(selectedItems[0],item);const selectedItem=selectedItems[0]||countries.find(item=>item.initialSelected);const handlePhoneNumberChange=event=>{const value=event.target.value;const countryCode=defaultCountry||selectedItems[0].id;onChange?.({countryCode,inputValue:value},{event});setInputPhoneNumber(value);};const renderListItem=({item})=>React.createElement(ListItemContent,{size:resolvedSize,disabled:disabled,addOnStart:showFlag?item.flag:null,match:inputValue},`${item.name} (${item.id})`);const renderValue=()=>{if(!selectedItem)return null;return showFlag?React.createElement("span",{className:cn(styles.withFlag)},selectedItem.flag,React.createElement("span",{className:cn(styles.countryCode)},selectedItem.id)):selectedItem.id};const renderEmptyValue=()=>React.createElement("div",{className:cn(styles.emptyResult,styles[resolvedSize])},emptyResult?emptyResult:React.createElement(React.Fragment,null,React.createElement(Icontuner,{size:resolvedSize},React.createElement(Search$1,null)),"No search result found"));const handleCross=()=>{setInputValue("");inputRef?.current?.focus();};const inputProps=getInputProps({ref:inputRef,disabled,onClick:e=>e.stopPropagation()});const toggleButtonProps=useMemo(()=>{return {...rest,...getToggleButtonProps({disabled})}},[getToggleButtonProps,disabled]);const phoneClasses=cn(styles.PhoneNumber,{[styles.stretch]:stretch});return React.createElement("div",{className:phoneClasses,"aria-disabled":disabled},React.createElement(InputWrapper,getWrapperProps(),React.createElement(InputAddOn,null,defaultCountry?React.createElement("div",{className:cn(styles.defaultText,styles[resolvedSize]),"aria-label":`Country code: ${defaultCountry}`},defaultCountry):React.createElement("div",_extends({},getTargetProps(),{className:cn(styles.target)}),React.createElement("div",_extends({},toggleButtonProps,{className:cn(styles.selectionButton,styles[resolvedSize]),role:"button"}),React.createElement(Button,{tabIndex:disabled?-1:0,nude:true,compact:true,system:true,qualifier:isOpen?React.createElement(CaretUp,null):React.createElement(CaretDown,null),qualifierEnd:true,disabled:disabled,size:resolvedSize},renderValue()))),React.createElement("span",{className:cn(styles.separator)})),React.createElement(Input,_extends({},rest,phoneInputProps(),{size:resolvedSize,stretch:stretch,ref:inputPhoneRef,enclosed:false,bezel:false,type:"text",onInput:handlePhoneNumberChange,placeholder:placeholder}))),React.createElement(BasePopover,_extends({},getPopoverProps(),{open:isOpen}),React.createElement(ListBox,_extends({},getMenuProps({},{suppressRefError:true}),{size:resolvedSize}),React.createElement("div",{className:cn(styles.popoverSearch)},React.createElement(Search,_extends({},inputProps,{size:resolvedSize,placeholder:searchPlaceholder,stretch:true,addOnEnd:React.createElement(Button,{size:resolvedSize,nude:true,system:true,icon:true,compact:true,type:"button",onClick:handleCross},React.createElement(Cross,null))}))),React.createElement("div",{className:cn(styles.listWrapper,styles[resolvedSize])},filteredItems.length===0?renderEmptyValue():filteredItems.map((item,index)=>React.createElement(ListItem,_extends({},getItemProps({item,index}),{key:`${item.id}-${index}`,highlight:!disabled&&highlightedIndex===index,selected:!disabled&&isItemSelected(item),size:resolvedSize,disabled:disabled}),renderListItem({item})))))))});PhoneNumber.displayName="PhoneNumber";PhoneNumber.propTypes={size:PropTypes.oneOf(["s","m","l"]),invalid:PropTypes.bool,disabled:PropTypes.bool,stretch:PropTypes.bool,emptyResult:PropTypes.string,placeholder:PropTypes.string,searchPlaceholder:PropTypes.string,showFlag:PropTypes.bool,countries:PropTypes.arrayOf(PropTypes.shape({id:PropTypes.string.isRequired,name:PropTypes.string.isRequired,flag:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),initialSelected:PropTypes.bool}).isRequired),defaultCountry:PropTypes.string,onChange:PropTypes.func}; | ||
| export { Datefield, Email, Input, InputAddOn, InputQualifier, InputWrapper, Numeric, Password, PhoneNumber, Pinfield, Search, Textfield, Timefield, URL, useInput }; |
| { | ||
| "name": "@asphalt-react/textfield", | ||
| "version": "2.4.0", | ||
| "version": "2.5.0", | ||
| "description": "Textfield", | ||
@@ -48,3 +48,3 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@asphalt-react/button": "^2.1.0", | ||
| "@asphalt-react/button": "^2.5.0", | ||
| "@asphalt-react/context": "^2.0.0", | ||
@@ -54,10 +54,10 @@ "@asphalt-react/helper": "^2.0.0", | ||
| "@asphalt-react/icontuner": "^2.1.0", | ||
| "@asphalt-react/popover": "^2.4.0", | ||
| "@asphalt-react/popover": "^2.5.0", | ||
| "@asphalt-react/qualifier": "^2.0.0", | ||
| "@asphalt-react/selection": "^2.4.0", | ||
| "@asphalt-react/toggle-button": "^2.4.0", | ||
| "@asphalt-react/selection": "^2.5.0", | ||
| "@asphalt-react/toggle-button": "^2.5.0", | ||
| "classnames": "^2.5.1", | ||
| "prop-types": "^15.8.1" | ||
| }, | ||
| "gitHead": "2f4de8f4d187e4d89b7bb20cb500b9f9647cb38b" | ||
| "gitHead": "f194e1d455904a1c8b26c4e994e64f592cec737f" | ||
| } |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
140481
1%- Lines of code
1113
3.25%