@khanacademy/wonder-blocks-search-field 5.1.11 → 5.1.13

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +3 -107
  3. package/dist/index.js +3 -109
  4. package/package.json +6 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-search-field
2
2
 
3
+ ## 5.1.13
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [b9e4946]
8
+ - Updated dependencies [b9e4946]
9
+ - Updated dependencies [b9e4946]
10
+ - @khanacademy/wonder-blocks-tokens@10.0.0
11
+ - @khanacademy/wonder-blocks-typography@3.2.0
12
+ - @khanacademy/wonder-blocks-form@7.1.11
13
+ - @khanacademy/wonder-blocks-icon-button@9.0.5
14
+ - @khanacademy/wonder-blocks-core@12.2.1
15
+ - @khanacademy/wonder-blocks-icon@5.1.3
16
+
17
+ ## 5.1.12
18
+
19
+ ### Patch Changes
20
+
21
+ - @khanacademy/wonder-blocks-icon-button@9.0.4
22
+
3
23
  ## 5.1.11
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,5 +1,4 @@
1
- import _extends from '@babel/runtime/helpers/extends';
2
- import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
2
  import * as React from 'react';
4
3
  import { StyleSheet } from 'aphrodite';
5
4
  import xIcon from '@phosphor-icons/core/regular/x.svg';
@@ -11,111 +10,8 @@ import { TextField } from '@khanacademy/wonder-blocks-form';
11
10
  import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
12
11
  import { semanticColor, border, spacing } from '@khanacademy/wonder-blocks-tokens';
13
12
 
14
- const defaultLabels = {
15
- clearSearch: "Clear search"
16
- };
13
+ const defaultLabels={clearSearch:"Clear search"};
17
14
 
18
- const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "id", "value", "placeholder", "style", "testId", "error", "instantValidation", "validate", "onValidate", "onClick", "onChange", "onFocus", "onBlur"];
19
- const SearchField = React.forwardRef(function SearchField(props, ref) {
20
- const {
21
- clearAriaLabel = defaultLabels.clearSearch,
22
- autoFocus,
23
- disabled = false,
24
- id,
25
- value,
26
- placeholder,
27
- style,
28
- testId,
29
- error,
30
- instantValidation = true,
31
- validate,
32
- onValidate,
33
- onClick,
34
- onChange,
35
- onFocus,
36
- onBlur
37
- } = props,
38
- otherProps = _objectWithoutPropertiesLoose(props, _excluded);
39
- const innerRef = React.useRef(null);
40
- const handleClear = () => {
41
- var _innerRef$current;
42
- onChange("");
43
- innerRef == null || (_innerRef$current = innerRef.current) == null || _innerRef$current.focus();
44
- };
45
- const maybeRenderClearIconButton = () => {
46
- if (!value.length || disabled) {
47
- return null;
48
- }
49
- return React.createElement(IconButton, {
50
- icon: xIcon,
51
- size: "small",
52
- kind: "tertiary",
53
- actionType: "neutral",
54
- onClick: handleClear,
55
- style: styles.dismissIcon,
56
- "aria-label": clearAriaLabel
57
- });
58
- };
59
- return React.createElement(Id, {
60
- id: id
61
- }, uniqueId => React.createElement(View, {
62
- onClick: onClick,
63
- style: [styles.inputContainer, style]
64
- }, React.createElement(PhosphorIcon, {
65
- icon: magnifyingGlassIcon,
66
- size: "small",
67
- color: disabled ? semanticColor.icon.disabled : semanticColor.icon.primary,
68
- style: styles.searchIcon,
69
- "aria-hidden": "true"
70
- }), React.createElement(TextField, _extends({
71
- id: uniqueId,
72
- type: "text",
73
- autoFocus: autoFocus,
74
- disabled: disabled,
75
- instantValidation: instantValidation,
76
- validate: validate,
77
- onValidate: onValidate,
78
- onChange: onChange,
79
- onFocus: onFocus,
80
- onBlur: onBlur,
81
- placeholder: placeholder,
82
- error: error,
83
- ref: node => {
84
- if (ref) {
85
- ref.current = node;
86
- }
87
- innerRef.current = node;
88
- },
89
- value: value,
90
- style: [styles.inputStyleReset, styles$1.LabelMedium],
91
- testId: testId
92
- }, otherProps)), maybeRenderClearIconButton()));
93
- });
94
- const styles = StyleSheet.create({
95
- inputContainer: {
96
- boxSizing: "border-box",
97
- flexDirection: "row",
98
- borderRadius: border.radius.radius_040,
99
- alignItems: "center",
100
- height: 40
101
- },
102
- searchIcon: {
103
- marginLeft: spacing.xSmall_8,
104
- marginRight: spacing.xSmall_8,
105
- position: "absolute"
106
- },
107
- dismissIcon: {
108
- margin: 0,
109
- position: "absolute",
110
- right: spacing.xxxSmall_4
111
- },
112
- inputStyleReset: {
113
- display: "flex",
114
- flex: 1,
115
- width: "100%",
116
- paddingLeft: spacing.xLarge_32,
117
- paddingRight: spacing.large_24 + spacing.medium_16
118
- }
119
- });
15
+ 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.icon.disabled:semanticColor.icon.primary,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.LabelMedium],testId:testId,...otherProps}),maybeRenderClearIconButton()]})})});const styles=StyleSheet.create({inputContainer:{boxSizing:"border-box",flexDirection:"row",borderRadius:border.radius.radius_040,alignItems:"center",height:40},searchIcon:{marginLeft:spacing.xSmall_8,marginRight:spacing.xSmall_8,position:"absolute"},dismissIcon:{margin:0,position:"absolute",right:spacing.xxxSmall_4},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingLeft:spacing.xLarge_32,paddingRight:spacing.large_24+spacing.medium_16}});
120
16
 
121
17
  export { SearchField as default };
package/dist/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var _extends = require('@babel/runtime/helpers/extends');
4
- var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
3
+ var jsxRuntime = require('react/jsx-runtime');
5
4
  var React = require('react');
6
5
  var aphrodite = require('aphrodite');
7
6
  var xIcon = require('@phosphor-icons/core/regular/x.svg');
@@ -33,118 +32,13 @@ function _interopNamespace(e) {
33
32
  return Object.freeze(n);
34
33
  }
35
34
 
36
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
37
- var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
38
35
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
39
36
  var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
40
37
  var magnifyingGlassIcon__default = /*#__PURE__*/_interopDefaultLegacy(magnifyingGlassIcon);
41
38
  var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
42
39
 
43
- const defaultLabels = {
44
- clearSearch: "Clear search"
45
- };
40
+ const defaultLabels={clearSearch:"Clear search"};
46
41
 
47
- const _excluded = ["clearAriaLabel", "autoFocus", "disabled", "id", "value", "placeholder", "style", "testId", "error", "instantValidation", "validate", "onValidate", "onClick", "onChange", "onFocus", "onBlur"];
48
- const SearchField = React__namespace.forwardRef(function SearchField(props, ref) {
49
- const {
50
- clearAriaLabel = defaultLabels.clearSearch,
51
- autoFocus,
52
- disabled = false,
53
- id,
54
- value,
55
- placeholder,
56
- style,
57
- testId,
58
- error,
59
- instantValidation = true,
60
- validate,
61
- onValidate,
62
- onClick,
63
- onChange,
64
- onFocus,
65
- onBlur
66
- } = props,
67
- otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
68
- const innerRef = React__namespace.useRef(null);
69
- const handleClear = () => {
70
- var _innerRef$current;
71
- onChange("");
72
- innerRef == null || (_innerRef$current = innerRef.current) == null || _innerRef$current.focus();
73
- };
74
- const maybeRenderClearIconButton = () => {
75
- if (!value.length || disabled) {
76
- return null;
77
- }
78
- return React__namespace.createElement(IconButton__default["default"], {
79
- icon: xIcon__default["default"],
80
- size: "small",
81
- kind: "tertiary",
82
- actionType: "neutral",
83
- onClick: handleClear,
84
- style: styles.dismissIcon,
85
- "aria-label": clearAriaLabel
86
- });
87
- };
88
- return React__namespace.createElement(wonderBlocksCore.Id, {
89
- id: id
90
- }, uniqueId => React__namespace.createElement(wonderBlocksCore.View, {
91
- onClick: onClick,
92
- style: [styles.inputContainer, style]
93
- }, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
94
- icon: magnifyingGlassIcon__default["default"],
95
- size: "small",
96
- color: disabled ? wonderBlocksTokens.semanticColor.icon.disabled : wonderBlocksTokens.semanticColor.icon.primary,
97
- style: styles.searchIcon,
98
- "aria-hidden": "true"
99
- }), React__namespace.createElement(wonderBlocksForm.TextField, _extends__default["default"]({
100
- id: uniqueId,
101
- type: "text",
102
- autoFocus: autoFocus,
103
- disabled: disabled,
104
- instantValidation: instantValidation,
105
- validate: validate,
106
- onValidate: onValidate,
107
- onChange: onChange,
108
- onFocus: onFocus,
109
- onBlur: onBlur,
110
- placeholder: placeholder,
111
- error: error,
112
- ref: node => {
113
- if (ref) {
114
- ref.current = node;
115
- }
116
- innerRef.current = node;
117
- },
118
- value: value,
119
- style: [styles.inputStyleReset, wonderBlocksTypography.styles.LabelMedium],
120
- testId: testId
121
- }, otherProps)), maybeRenderClearIconButton()));
122
- });
123
- const styles = aphrodite.StyleSheet.create({
124
- inputContainer: {
125
- boxSizing: "border-box",
126
- flexDirection: "row",
127
- borderRadius: wonderBlocksTokens.border.radius.radius_040,
128
- alignItems: "center",
129
- height: 40
130
- },
131
- searchIcon: {
132
- marginLeft: wonderBlocksTokens.spacing.xSmall_8,
133
- marginRight: wonderBlocksTokens.spacing.xSmall_8,
134
- position: "absolute"
135
- },
136
- dismissIcon: {
137
- margin: 0,
138
- position: "absolute",
139
- right: wonderBlocksTokens.spacing.xxxSmall_4
140
- },
141
- inputStyleReset: {
142
- display: "flex",
143
- flex: 1,
144
- width: "100%",
145
- paddingLeft: wonderBlocksTokens.spacing.xLarge_32,
146
- paddingRight: wonderBlocksTokens.spacing.large_24 + wonderBlocksTokens.spacing.medium_16
147
- }
148
- });
42
+ 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.icon.disabled:wonderBlocksTokens.semanticColor.icon.primary,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.LabelMedium],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:{marginLeft:wonderBlocksTokens.spacing.xSmall_8,marginRight:wonderBlocksTokens.spacing.xSmall_8,position:"absolute"},dismissIcon:{margin:0,position:"absolute",right:wonderBlocksTokens.spacing.xxxSmall_4},inputStyleReset:{display:"flex",flex:1,width:"100%",paddingLeft:wonderBlocksTokens.spacing.xLarge_32,paddingRight:wonderBlocksTokens.spacing.large_24+wonderBlocksTokens.spacing.medium_16}});
149
43
 
150
44
  module.exports = SearchField;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-search-field",
3
- "version": "5.1.11",
3
+ "version": "5.1.13",
4
4
  "design": "v1",
5
5
  "description": "Search Field components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -12,13 +12,12 @@
12
12
  "access": "public"
13
13
  },
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
15
  "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-form": "7.1.10",
16
+ "@khanacademy/wonder-blocks-form": "7.1.11",
18
17
  "@khanacademy/wonder-blocks-icon": "5.1.3",
19
- "@khanacademy/wonder-blocks-icon-button": "9.0.3",
20
- "@khanacademy/wonder-blocks-tokens": "9.0.0",
21
- "@khanacademy/wonder-blocks-typography": "3.1.3"
18
+ "@khanacademy/wonder-blocks-icon-button": "9.0.5",
19
+ "@khanacademy/wonder-blocks-tokens": "10.0.0",
20
+ "@khanacademy/wonder-blocks-typography": "3.2.0"
22
21
  },
23
22
  "peerDependencies": {
24
23
  "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +25,7 @@
26
25
  "react": "18.2.0"
27
26
  },
28
27
  "devDependencies": {
29
- "@khanacademy/wb-dev-build-settings": "2.1.1"
28
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
30
29
  },
31
30
  "scripts": {
32
31
  "test": "echo \"Error: no test specified\" && exit 1"