@khanacademy/wonder-blocks-search-field 5.1.85 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 5.2.0
+
+### Minor Changes
+
+- 355f6e1: The default `aria-label` for the SearchField clear button now reads a translated string from `WonderBlocksConfigProvider`. The `clearAriaLabel` prop overrides the built-in translation.
+
+### Patch Changes
+
+- Updated dependencies [9ec3189]
+- Updated dependencies [9ec3189]
+- Updated dependencies [f070142]
+- Updated dependencies [355f6e1]
+    - @khanacademy/wonder-blocks-form@7.7.0
+    - @khanacademy/wonder-blocks-config@0.4.0
+
 ## 5.1.85
 
 ### Patch Changes

package/dist/components/search-field.d.ts

@@ -2,7 +2,8 @@ import * as React from "react";
 import type { StyleType, AriaProps } from "@khanacademy/wonder-blocks-core";
 type Props = AriaProps & {
     /**
-     * ARIA label for the clear button. Defaults to "Clear search".
+     * ARIA label for the clear button. This overrides the default label
+     * provided by `WonderBlocksConfigProvider` ("Clear search" by default).
      */
     clearAriaLabel?: string;
     /**

package/dist/es/index.js

@@ -7,11 +7,10 @@ import { styles as styles$1 } from '@khanacademy/wonder-blocks-typography';
 import { Id, View } from '@khanacademy/wonder-blocks-core';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import { TextField } from '@khanacademy/wonder-blocks-form';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import { semanticColor, border, sizing } from '@khanacademy/wonder-blocks-tokens';
 
-const defaultLabels={clearSearch:"Clear search"};
-
-const SearchField=React.forwardRef(function SearchField(props,ref){const{clearAriaLabel=defaultLabels.clearSearch,autoFocus,disabled=false,id,value,placeholder,style,testId,error,instantValidation=true,validate,onValidate,onClick,onChange,onFocus,onBlur,...otherProps}=props;const innerRef=React.useRef(null);const handleClear=()=>{onChange("");innerRef?.current?.focus();};const maybeRenderClearIconButton=()=>{if(!value.length||disabled){return null}return jsx(IconButton,{icon:xIcon,size:"small",kind:"tertiary",actionType:"neutral",onClick:handleClear,style:styles.dismissIcon,"aria-label":clearAriaLabel})};return jsx(Id,{id:id,children:uniqueId=>jsxs(View,{onClick:onClick,style:[styles.inputContainer,style],children:[jsx(PhosphorIcon,{icon:magnifyingGlassIcon,size:"small",color:disabled?semanticColor.core.foreground.disabled.strong:error?semanticColor.core.foreground.critical.default:semanticColor.core.foreground.neutral.subtle,style:styles.searchIcon,"aria-hidden":"true"}),jsx(TextField,{id:uniqueId,type:"text",autoFocus:autoFocus,disabled:disabled,instantValidation:instantValidation,validate:validate,onValidate:onValidate,onChange:onChange,onFocus:onFocus,onBlur:onBlur,placeholder:placeholder,error:error,ref:node=>{if(ref){ref.current=node;}innerRef.current=node;},value:value,style:[styles.inputStyleReset,styles$1.BodyTextMediumMediumWeight],testId:testId,...otherProps}),maybeRenderClearIconButton()]})})});const styles=StyleSheet.create({inputContainer:{boxSizing:"border-box",flexDirection:"row",borderRadius:border.radius.radius_040,alignItems:"center",height:40},searchIcon:{marginInlineStart:sizing.size_080,marginInlineEnd:sizing.size_080,position:"absolute"},dismissIcon:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingInlineStart:sizing.size_320,paddingInlineEnd:sizing.size_400}});
+const SearchField=React.forwardRef(function SearchField(props,ref){const{clearAriaLabel,autoFocus,disabled=false,id,value,placeholder,style,testId,error,instantValidation=true,validate,onValidate,onClick,onChange,onFocus,onBlur,...otherProps}=props;const{strings}=useWonderBlocksI18n();const innerRef=React.useRef(null);const handleClear=()=>{onChange("");innerRef?.current?.focus();};const maybeRenderClearIconButton=()=>{if(!value.length||disabled){return null}return jsx(IconButton,{icon:xIcon,size:"small",kind:"tertiary",actionType:"neutral",onClick:handleClear,style:styles.dismissIcon,"aria-label":clearAriaLabel||strings.iconAltClearSearch})};return jsx(Id,{id:id,children:uniqueId=>jsxs(View,{onClick:onClick,style:[styles.inputContainer,style],children:[jsx(PhosphorIcon,{icon:magnifyingGlassIcon,size:"small",color:disabled?semanticColor.core.foreground.disabled.strong:error?semanticColor.core.foreground.critical.default:semanticColor.core.foreground.neutral.subtle,style:styles.searchIcon,"aria-hidden":"true"}),jsx(TextField,{id:uniqueId,type:"text",autoFocus:autoFocus,disabled:disabled,instantValidation:instantValidation,validate:validate,onValidate:onValidate,onChange:onChange,onFocus:onFocus,onBlur:onBlur,placeholder:placeholder,error:error,ref:node=>{if(ref){ref.current=node;}innerRef.current=node;},value:value,style:[styles.inputStyleReset,styles$1.BodyTextMediumMediumWeight],testId:testId,...otherProps}),maybeRenderClearIconButton()]})})});const styles=StyleSheet.create({inputContainer:{boxSizing:"border-box",flexDirection:"row",borderRadius:border.radius.radius_040,alignItems:"center",height:40},searchIcon:{marginInlineStart:sizing.size_080,marginInlineEnd:sizing.size_080,position:"absolute"},dismissIcon:{margin:0,position:"absolute",insetInlineEnd:sizing.size_040},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingInlineStart:sizing.size_320,paddingInlineEnd:sizing.size_400}});
 
 export { SearchField as default };

package/dist/index.js

@@ -9,6 +9,7 @@ var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
@@ -37,8 +38,6 @@ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var magnifyingGlassIcon__default = /*#__PURE__*/_interopDefaultLegacy(magnifyingGlassIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
-const defaultLabels={clearSearch:"Clear search"};
-
-const SearchField=React__namespace.forwardRef(function SearchField(props,ref){const{clearAriaLabel=defaultLabels.clearSearch,autoFocus,disabled=false,id,value,placeholder,style,testId,error,instantValidation=true,validate,onValidate,onClick,onChange,onFocus,onBlur,...otherProps}=props;const innerRef=React__namespace.useRef(null);const handleClear=()=>{onChange("");innerRef?.current?.focus();};const maybeRenderClearIconButton=()=>{if(!value.length||disabled){return null}return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],size:"small",kind:"tertiary",actionType:"neutral",onClick:handleClear,style:styles.dismissIcon,"aria-label":clearAriaLabel})};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:onClick,style:[styles.inputContainer,style],children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:magnifyingGlassIcon__default["default"],size:"small",color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:error?wonderBlocksTokens.semanticColor.core.foreground.critical.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle,style:styles.searchIcon,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:uniqueId,type:"text",autoFocus:autoFocus,disabled:disabled,instantValidation:instantValidation,validate:validate,onValidate:onValidate,onChange:onChange,onFocus:onFocus,onBlur:onBlur,placeholder:placeholder,error:error,ref:node=>{if(ref){ref.current=node;}innerRef.current=node;},value:value,style:[styles.inputStyleReset,wonderBlocksTypography.styles.BodyTextMediumMediumWeight],testId:testId,...otherProps}),maybeRenderClearIconButton()]})})});const styles=aphrodite.StyleSheet.create({inputContainer:{boxSizing:"border-box",flexDirection:"row",borderRadius:wonderBlocksTokens.border.radius.radius_040,alignItems:"center",height:40},searchIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_080,marginInlineEnd:wonderBlocksTokens.sizing.size_080,position:"absolute"},dismissIcon:{margin:0,position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_040},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingInlineStart:wonderBlocksTokens.sizing.size_320,paddingInlineEnd:wonderBlocksTokens.sizing.size_400}});
+const SearchField=React__namespace.forwardRef(function SearchField(props,ref){const{clearAriaLabel,autoFocus,disabled=false,id,value,placeholder,style,testId,error,instantValidation=true,validate,onValidate,onClick,onChange,onFocus,onBlur,...otherProps}=props;const{strings}=wonderBlocksConfig.useWonderBlocksI18n();const innerRef=React__namespace.useRef(null);const handleClear=()=>{onChange("");innerRef?.current?.focus();};const maybeRenderClearIconButton=()=>{if(!value.length||disabled){return null}return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],size:"small",kind:"tertiary",actionType:"neutral",onClick:handleClear,style:styles.dismissIcon,"aria-label":clearAriaLabel||strings.iconAltClearSearch})};return jsxRuntime.jsx(wonderBlocksCore.Id,{id:id,children:uniqueId=>jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:onClick,style:[styles.inputContainer,style],children:[jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:magnifyingGlassIcon__default["default"],size:"small",color:disabled?wonderBlocksTokens.semanticColor.core.foreground.disabled.strong:error?wonderBlocksTokens.semanticColor.core.foreground.critical.default:wonderBlocksTokens.semanticColor.core.foreground.neutral.subtle,style:styles.searchIcon,"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksForm.TextField,{id:uniqueId,type:"text",autoFocus:autoFocus,disabled:disabled,instantValidation:instantValidation,validate:validate,onValidate:onValidate,onChange:onChange,onFocus:onFocus,onBlur:onBlur,placeholder:placeholder,error:error,ref:node=>{if(ref){ref.current=node;}innerRef.current=node;},value:value,style:[styles.inputStyleReset,wonderBlocksTypography.styles.BodyTextMediumMediumWeight],testId:testId,...otherProps}),maybeRenderClearIconButton()]})})});const styles=aphrodite.StyleSheet.create({inputContainer:{boxSizing:"border-box",flexDirection:"row",borderRadius:wonderBlocksTokens.border.radius.radius_040,alignItems:"center",height:40},searchIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_080,marginInlineEnd:wonderBlocksTokens.sizing.size_080,position:"absolute"},dismissIcon:{margin:0,position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_040},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingInlineStart:wonderBlocksTokens.sizing.size_320,paddingInlineEnd:wonderBlocksTokens.sizing.size_400}});
 
 module.exports = SearchField;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Search Field components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "5.1.85",
+  "version": "5.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -20,8 +20,9 @@
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@khanacademy/wonder-blocks-config": "0.4.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-form": "7.6.15",
+    "@khanacademy/wonder-blocks-form": "7.7.0",
     "@khanacademy/wonder-blocks-icon": "6.0.2",
     "@khanacademy/wonder-blocks-icon-button": "12.0.1",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",

package/dist/util/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const defaultLabels: {
-    readonly clearSearch: "Clear search";
-};