@cladd-ui/react 0.4.0 → 0.4.1
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/CHANGELOG.md
CHANGED
|
@@ -14,6 +14,10 @@ interface SearchFieldOwnProps {
|
|
|
14
14
|
inset?: boolean;
|
|
15
15
|
/** Search field input size. Default `'md'`. */
|
|
16
16
|
size?: InputSize;
|
|
17
|
+
/** Apply pill (`rounded-full`) corners to the input. Default `true`. */
|
|
18
|
+
rounded?: boolean;
|
|
19
|
+
/** Show a clear button inside the input. Default `true`. */
|
|
20
|
+
clearButton?: boolean;
|
|
17
21
|
/** Default `'Search'`. */
|
|
18
22
|
placeholder?: string;
|
|
19
23
|
/** Make the input non-editable but still focusable for value display/copying. */
|
|
@@ -22,6 +26,10 @@ interface SearchFieldOwnProps {
|
|
|
22
26
|
disabled?: boolean;
|
|
23
27
|
/** Extra classes for the search field `Surface`. */
|
|
24
28
|
className?: string;
|
|
29
|
+
/** Extra classes forwarded to the inner `Input` root. */
|
|
30
|
+
inputClassName?: string;
|
|
31
|
+
/** Extra classes forwarded to the inner `Input` content wrapper. */
|
|
32
|
+
inputContentClassName?: string;
|
|
25
33
|
/** Fires on every keystroke. Also fires with `''` when the clear button is pressed. */
|
|
26
34
|
onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
|
|
27
35
|
/** Forwarded to the search field `Surface` root. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CAAC,YAAY,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,
|
|
1
|
+
{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,oDAAoD;IACpD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,mBAAmB,GAChD,IAAI,CAAC,YAAY,EAAE,MAAM,mBAAmB,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA8DlD,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { SearchIcon } from './icons/SearchIcon.js';
|
|
|
4
4
|
import { Input } from './Input.js';
|
|
5
5
|
import { Surface } from './Surface.js';
|
|
6
6
|
export const SearchField = (props) => {
|
|
7
|
-
const { value = '', inset = false, size = 'md', placeholder = 'Search', className = '', readOnly = false, disabled = false, onChange = () => { }, ref, ...rest } = props;
|
|
8
|
-
return (_jsx(Surface, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, level: inset ? '+0' : '+1', className: cn('cladd-search-field sticky z-20', !inset && 'top-0 ml-px rounded-t-cladd-popover', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { "data-part": "wrapper", className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className:
|
|
7
|
+
const { value = '', inset = false, size = 'md', rounded = true, clearButton = true, placeholder = 'Search', className = '', inputClassName = '', inputContentClassName = '', readOnly = false, disabled = false, onChange = () => { }, ref, ...rest } = props;
|
|
8
|
+
return (_jsx(Surface, { "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, level: inset ? '+0' : '+1', className: cn('cladd-search-field sticky z-20', !inset && 'top-0 ml-px rounded-t-cladd-popover', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { "data-part": "wrapper", className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className: cn('w-full', inputClassName), placeholder: placeholder, onChange: (v, e) => onChange(v, e), contentClassName: cn('pl-6.5', inputContentClassName), value: value, clearButton: clearButton, rounded: rounded, size: size, readOnly: readOnly, disabled: disabled, onClear: () => onChange('') }), _jsx(SearchIcon, { "data-part": "icon", className: cn('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-cladd-fg-softer', inset ? 'left-2' : 'left-4') })] }) }));
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/components/SearchField.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AAwClD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,IAAI,EAClB,WAAW,GAAG,QAAQ,EACtB,SAAS,GAAG,EAAE,EACd,cAAc,GAAG,EAAE,EACnB,qBAAqB,GAAG,EAAE,EAC1B,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,OAAO,qBACS,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,EACpC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC1B,SAAS,EAAE,EAAE,CACX,gCAAgC,EAChC,CAAC,KAAK,IAAI,qCAAqC,EAC/C,KAAK,IAAI,gCAAgC,EACzC,SAAS,CACV,EACD,OAAO,EAAE,CAAC,KAAK,EACf,GAAG,EAAE,GAAG,KACJ,IAAI,YAER,4BACY,SAAS,EACnB,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAK,IAAI,OAAO,CAAC,aAErD,KAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,EACvC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAS,EAAE,CAAgC,EAAE,EAAE,CACxD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAEhB,gBAAgB,EAAE,EAAE,CAAC,QAAQ,EAAE,qBAAqB,CAAC,EACrD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,EACF,KAAC,UAAU,iBACC,MAAM,EAChB,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAC5B,GACD,IACE,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}
|