carbon-react 162.10.0 → 162.11.0

package/lib/components/search/__internal__/legacy/search.component.d.ts

@@ -1,71 +0,0 @@
-import React from "react";
-import { MarginProps } from "styled-system";
-import { TagProps } from "../../../../__internal__/utils/helpers/tags";
-import { CommonTextboxProps } from "../../../textbox";
-import { ValidationProps } from "../../../../__internal__/validations";
-export interface SearchEvent {
-    target: {
-        name?: string;
-        id?: string;
-        value: string;
-    };
-}
-export interface SearchProps extends ValidationProps, MarginProps, TagProps, Pick<CommonTextboxProps, "label" | "inputHint"> {
-    /** Prop to specify the aria-label of the search component */
-    "aria-label"?: string;
-    /** Prop to specify the aria-label of the search button */
-    searchButtonAriaLabel?: string;
-    /** Prop for `id` */
-    id?: string;
-    /** Prop for `name` */
-    name?: string;
-    /** Prop for `onBlur` events */
-    onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Prop for `onChange` events */
-    onChange: (ev: SearchEvent) => void;
-    /** Prop for `onClick` events.
-     *  `onClick` events are triggered when the `searchButton` is clicked
-     */
-    onClick?: (ev: SearchEvent) => void;
-    /**
-     * Sets whether the onClick action should be triggered when the Search cross icon is clicked.
-     */
-    triggerOnClear?: boolean;
-    /** Prop for `onFocus` events */
-    onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Prop for `onKeyDown` events */
-    onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
-    /** Prop for a placeholder */
-    placeholder?: string;
-    /**
-     * Pass a boolean to render a search Button with default text.
-     * Pass a string to override the text in the search Button
-     * */
-    searchButton?: boolean | string;
-    /** Data tag prop bag for searchButton */
-    searchButtonDataProps?: TagProps;
-    /**
-     * Prop for specifying an input width length.
-     * Leaving the `searchWidth` prop with no value will default the width to '100%'
-     */
-    searchWidth?: string;
-    /**
-     * Prop for specifying the max-width of the input.
-     * Leaving the `maxWidth` prop with no value will default the width to '100%'
-     */
-    maxWidth?: string;
-    /** Current value */
-    value: string;
-    /** Prop to specify the styling of the search component */
-    variant?: "default" | "dark";
-    /** Input tabindex */
-    tabIndex?: number;
-    /** [Legacy] Overrides the default tooltip position */
-    tooltipPosition?: "top" | "bottom" | "left" | "right";
-}
-export type SearchHandle = {
-    /** Programmatically focus on root container of Dialog. */
-    focus: () => void;
-} | null;
-export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
-export default Search;

package/lib/components/search/__internal__/legacy/search.component.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),n=require("../../../../__internal__/utils/helpers/tags/tags.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var o=require("../../../../style/utils/filter-styled-system-margin-props.js"),a=require("./search.style.js"),i=require("./search-button.style.js"),l=require("../../../icon/icon.component.js");require("../../../icon/icon.style.js");var s=require("../../../textbox/textbox.component.js"),u=require("../../../button/button.component.js"),c=require("../../../../hooks/__internal__/useLocale/useLocale.js"),d=require("../../../../__internal__/utils/helpers/events/events.js");function p(e){return e&&e.__esModule?e:{default:e}}var f=p(t),h=p(r);function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function y(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){b(e,t,r[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function v(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const m=f.default.forwardRef(((r,p)=>{var{onChange:f,onClick:b,onFocus:m,onBlur:j,onKeyDown:O,value:x,id:P,name:w,label:_,inputHint:q,searchWidth:B,maxWidth:k,searchButton:D,searchButtonDataProps:C,searchButtonAriaLabel:S,placeholder:I,variant:T="default","aria-label":W,tabIndex:H,error:E,warning:F,info:K,tooltipPosition:L,triggerOnClear:M}=r,N=v(r,["onChange","onClick","onFocus","onBlur","onKeyDown","value","id","name","label","inputHint","searchWidth","maxWidth","searchButton","searchButtonDataProps","searchButtonAriaLabel","placeholder","variant","aria-label","tabIndex","error","warning","info","tooltipPosition","triggerOnClear"]);const R=c.default(),A=t.useRef(null),$=t.useRef(null);t.useImperativeHandle(p,(()=>({focus(){var e;null===(e=$.current)||void 0===e||e.focus()}})),[]),h.default("string"==typeof x,"This component has no initial value");const[z,V]=t.useState(!1),G=0===x.length;let J={};D&&b&&(J={onClick:()=>{b({target:{name:w,id:P,value:x}})}});const Q="string"==typeof D?D:R.search.searchButtonText(),U=!!(null==x?void 0:x.length),{className:X}=N,Y=v(N,["className"]),Z=t.useMemo((()=>["legacy-search",U?"has-value":void 0,"dark"===T?"dark-background":void 0,D?"with-button":void 0,X].filter(Boolean).join(" ")),[U,T,D,X]);return e.jsxs(a.default,g(y({ref:A,isFocused:z,searchWidth:B,maxWidth:k,searchHasValue:U,showSearchButton:!!D,variant:T,id:P,name:w},Y,o.default(Y),n.default("search",Y)),{className:Z,children:[e.jsx(s.Textbox,{placeholder:I,value:x,inputIcon:G?void 0:"cross",iconTabIndex:G?-1:0,iconOnClick:()=>{var e;null==f||f({target:g(y({},w&&{name:w},P&&{id:P}),{value:""})}),M&&(null==b||b({target:g(y({},w&&{name:w},P&&{id:P}),{value:""})})),null===(e=$.current)||void 0===e||e.focus()},iconOnMouseDown:e=>{e.preventDefault()},"aria-label":W||(_?void 0:R.search.searchButtonText()),label:_,inputHint:q,onFocus:e=>{V(!0),m&&m(e)},onBlur:e=>{V(!1),j&&j(e)},onChange:e=>{f(e)},onKeyDown:e=>{1===e.key.length&&e.stopPropagation(),d.default.isEscKey(e)&&!G&&(e.stopPropagation(),null==f||f({target:g(y({},w&&{name:w},P&&{id:P}),{value:""})})),O&&O(e)},ref:$,tabIndex:H,error:E,warning:F,info:K,leftChildren:D?void 0:e.jsx(l.default,{type:"search",ml:1}),tooltipPosition:L,my:0,maxWidth:"100%"}),D&&e.jsx(i.default,{children:e.jsx(u.default,g(y({"aria-label":S||Q,size:"medium",px:2,buttonType:"primary",iconPosition:"before",iconType:"search",className:"legacy-search-button"},n.default(`${Q}-button`,y({"data-element":`${Q}-button`},C)),J),{children:Q}))})]}))}));exports.Search=m,exports.default=m;

package/lib/components/search/__internal__/legacy/search.style.d.ts

@@ -1,13 +0,0 @@
-interface StyledSearchProps {
-    name?: string;
-    isFocused?: boolean;
-    searchHasValue?: boolean;
-    searchWidth?: string;
-    maxWidth?: string;
-    showSearchButton?: boolean;
-    variant?: string;
-}
-declare const StyledSearch: import("styled-components").StyledComponent<"div", any, {
-    theme: object;
-} & StyledSearchProps, "theme">;
-export default StyledSearch;

package/lib/components/search/__internal__/legacy/search.style.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-system"),o=require("styled-components"),t=require("../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),e=require("../../../icon/icon.style.js"),a=require("../../../../style/themes/apply-base-theme.js"),s=require("../../../../__internal__/form-field/form-field.style.js");function i(r){return r&&r.__esModule?r:{default:r}}const l=i(o).default.div.attrs(a.default).withConfig({displayName:"search.style__StyledSearch",componentId:"carbon_v162_9_1__sc-a8478a22-0"})(["",""],(({isFocused:a,searchWidth:i,maxWidth:l,searchHasValue:n,showSearchButton:c,variant:d})=>{const u="dark"===d,m=u?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)";return o.css(["margin-bottom:var(--fieldSpacing);"," width:",";max-width:",";padding-bottom:var(--spacing025);background-color:transparent;display:inline-flex;align-items:center;font-size:var(--fontSize100);"," ","{flex:1;}",'{:not([data-element="search"]){'," ","}cursor:pointer;}","{","}"],r.margin,i?`${i}`:"100%",l?`${l}`:"100%",!c&&o.css(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],m,u?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(n||a)&&o.css(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),s.default,e.default,u&&!c&&o.css(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!u&&o.css(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),t.default,n&&o.css(["margin-bottom:-1px;"]))}));exports.default=l;