carbon-react 159.13.3 → 159.14.0
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/esm/__internal__/hint-text/hint-text-style-overrides.style.d.ts +2 -0
- package/esm/__internal__/hint-text/hint-text-style-overrides.style.js +1 -0
- package/esm/__internal__/hint-text/hint-text.style.js +1 -1
- package/esm/__internal__/input/input-style-overrides.style.d.ts +1 -0
- package/esm/__internal__/input/input-style-overrides.style.js +1 -1
- package/esm/__internal__/input/input.style.js +1 -1
- package/esm/__internal__/label/label-style-overrides.style.d.ts +2 -0
- package/esm/__internal__/label/label-style-overrides.style.js +1 -0
- package/esm/__internal__/label/label.style.js +1 -1
- package/esm/__internal__/validation-message/__next__/validation-message-style-overrides.style.d.ts +2 -0
- package/esm/__internal__/validation-message/__next__/validation-message-style-overrides.style.js +1 -0
- package/esm/__internal__/validation-message/__next__/validation-message.style.js +1 -1
- package/esm/components/icon/icon.style.js +1 -1
- package/esm/components/link/link.style.js +1 -1
- package/esm/components/menu/menu-full-screen/menu-full-screen.style.js +1 -1
- package/esm/components/menu/menu-item/menu-item.style.js +1 -1
- package/esm/components/search/__internal__/legacy/search-button.style.js +1 -0
- package/esm/components/search/__internal__/legacy/search.component.d.ts +71 -0
- package/esm/components/search/__internal__/legacy/search.component.js +1 -0
- package/esm/components/search/__internal__/legacy/search.style.js +1 -0
- package/esm/components/search/search.component.d.ts +24 -28
- package/esm/components/search/search.component.js +1 -1
- package/esm/components/textbox/__internal__/__next__/text-input.component.js +1 -1
- package/esm/components/textbox/__internal__/__next__/text-input.style.js +1 -1
- package/lib/__internal__/hint-text/hint-text-style-overrides.style.d.ts +2 -0
- package/lib/__internal__/hint-text/hint-text-style-overrides.style.js +1 -0
- package/lib/__internal__/hint-text/hint-text.style.js +1 -1
- package/lib/__internal__/input/input-style-overrides.style.d.ts +1 -0
- package/lib/__internal__/input/input-style-overrides.style.js +1 -1
- package/lib/__internal__/input/input.style.js +1 -1
- package/lib/__internal__/label/label-style-overrides.style.d.ts +2 -0
- package/lib/__internal__/label/label-style-overrides.style.js +1 -0
- package/lib/__internal__/label/label.style.js +1 -1
- package/lib/__internal__/validation-message/__next__/validation-message-style-overrides.style.d.ts +2 -0
- package/lib/__internal__/validation-message/__next__/validation-message-style-overrides.style.js +1 -0
- package/lib/__internal__/validation-message/__next__/validation-message.style.js +1 -1
- package/lib/components/icon/icon.style.js +1 -1
- package/lib/components/link/link.style.js +1 -1
- package/lib/components/menu/menu-full-screen/menu-full-screen.style.js +1 -1
- package/lib/components/menu/menu-item/menu-item.style.js +1 -1
- package/lib/components/search/__internal__/legacy/search-button.style.js +1 -0
- package/lib/components/search/__internal__/legacy/search.component.d.ts +71 -0
- package/lib/components/search/__internal__/legacy/search.component.js +1 -0
- package/lib/components/search/__internal__/legacy/search.style.js +1 -0
- package/lib/components/search/search.component.d.ts +24 -28
- package/lib/components/search/search.component.js +1 -1
- package/lib/components/textbox/__internal__/__next__/text-input.component.js +1 -1
- package/lib/components/textbox/__internal__/__next__/text-input.style.js +1 -1
- package/package.json +1 -2
- package/esm/components/search/search-button.style.js +0 -1
- package/esm/components/search/search.style.js +0 -1
- package/lib/components/search/search-button.style.js +0 -1
- package/lib/components/search/search.style.js +0 -1
- /package/esm/components/search/{search-button.style.d.ts → __internal__/legacy/search-button.style.d.ts} +0 -0
- /package/esm/components/search/{search.style.d.ts → __internal__/legacy/search.style.d.ts} +0 -0
- /package/lib/components/search/{search-button.style.d.ts → __internal__/legacy/search-button.style.d.ts} +0 -0
- /package/lib/components/search/{search.style.d.ts → __internal__/legacy/search.style.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{css as e}from"styled-components";const t=e([".search.inverse &{color:var(--input-labelset-inverse-label-alt);}"]),l=e(["",""],t);export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"styled-components";const
|
|
1
|
+
import t from"styled-components";import e from"./hint-text-style-overrides.style.js";const l=t.span.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-25859ede-0"})(["color:",";font:",";",""],(({$disabled:t})=>t?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-alt)"),(({$size:t})=>(t=>{switch(t){case"small":return"var(--global-font-static-comp-regular-s)";case"large":return"var(--global-font-static-comp-regular-l)";default:return"var(--global-font-static-comp-regular-m)"}})(t)),e);export{l as default};
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export declare const dateStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
5
5
|
export declare const searchStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
6
|
+
export declare const searchNewStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
6
7
|
export declare const selectStyleOverrides: ($size?: string, $isDisabled?: boolean, $isReadOnly?: boolean) => import("styled-components").FlattenSimpleInterpolation;
|
|
7
8
|
export declare const pagerStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
8
9
|
export declare const numeralDateStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css as t}from"styled-components";import a from"../../style/utils/add-focus-styling.js";const o=t([".date &{.input-text-container input{padding:0 0 0 12px;margin-right:-12px;}}"]),
|
|
1
|
+
import{css as t}from"styled-components";import a from"../../style/utils/add-focus-styling.js";const o=t([".date &{.input-text-container input{padding:0 0 0 12px;margin-right:-12px;}}"]),e="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.9497 5.05022C15.3403 5.44074 15.3403 6.07391 14.9497 6.46443L11.4142 9.99997L14.9497 13.5355C15.3403 13.926 15.3403 14.5592 14.9497 14.9497C14.5592 15.3402 13.9261 15.3402 13.5355 14.9497L10 11.4142L6.46446 14.9497C6.07394 15.3402 5.44077 15.3402 5.05025 14.9497C4.65972 14.5592 4.65972 13.926 5.05025 13.5355L8.58578 9.99997L5.05025 6.46443C4.65972 6.07391 4.65972 5.44074 5.05025 5.05022C5.44077 4.65969 6.07394 4.65969 6.46446 5.05022L10 8.58575L13.5355 5.05022C13.9261 4.65969 14.5592 4.65969 14.9497 5.05022Z'/%3E%3C/svg%3E\")",r=t([".legacy-search &{height:40px;box-sizing:border-box;.input-text-container{flex-wrap:wrap;}input{width:30px;}}"]),n=t([".legacy-search:not(.with-button):not(.has-value) &:not(:focus-within){border-color:transparent;background:transparent;}"]),i=t([".legacy-search.with-button &{border-top-right-radius:0;border-bottom-right-radius:0;}"]),l=t([".legacy-search.dark-background &{input{::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}}}"]),c=t([".legacy-search.dark-background:not(.with-button) &{input{color:var(--input-typical-inverse-txt-default);}}.legacy-search.dark-background.has-value:not(.with-button) &{.input-text-container,input{color:var(--colorsUtilityYang080);}.input-text-container:hover{input{color:var(--colorsUtilityYang100);}}}"]),s=t([".legacy-search.dark-background.with-button:not(.has-value) &{input{color:var(--colorsUtilityYang100);}}"]),p=t([".legacy-search.dark-background:not(.with-button) &{background-color:transparent;border-color:var(--colorsUtilityYang080);}"]),u=t([""," "," "," "," "," "," ",""],r,n,i,l,c,s,p),d=t(['.search &{--search-clear-icon-color:var(--button-typical-subtle-label-default);--search-button-icon-color:var(--button-typical-subtle-label-default);--search-button-hover-bg:var(--button-typical-subtle-bg-hover);--search-button-hover-icon-color:var(--button-typical-subtle-label-hover);input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:var(--global-size-2-xs);height:var(--global-size-2-xs);background-color:var(--search-clear-icon-color);-webkit-mask:center / contain no-repeat ',";mask:center / contain no-repeat ",';cursor:pointer;}button{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);}button:hover{background-color:var(--search-button-hover-bg);}button span[type="search"]{color:var(--search-button-icon-color);}button:hover span[type="search"]{color:var(--search-button-hover-icon-color);}&:focus-within:has(:focus:not(button)){box-shadow:none;-webkit-box-shadow:none;}.input-text-container input[type="search"]:focus{border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);'," z-index:2;}}"],e,e,a()),b=t(['.search.inverse &{--search-clear-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-hover-bg:var(--button-typical-subtle-inverse-bg-hover);--search-button-hover-icon-color:var( --button-typical-subtle-inverse-label-hover );background-color:var(--input-typical-inverse-bg-default);&[data-role="input-container"]{border-color:var(--input-typical-inverse-border-default);}.input-text-container input[type="search"]{color:var(--input-typical-inverse-txt-default);}}.search.inverse.error &{border-color:var(--input-validation-inverse-border-error);}']),g=t([""," ",""],d,b),h=t(['[data-role="select-textbox"] &[data-is-transparent="false"]{.input-text-container{position:relative;.select-text:not(.disabled):not(.read-only){position:absolute;top:0;left:0;width:calc(100% - 48px);height:100%;padding:var(--global-space-none) var(--global-space-none) var(--global-space-none) var(--global-space-comp-m);cursor:pointer;}}}']),v=t([".multi-select &,.filterable-select &{.input-text-container:not(.disabled):not(.read-only){cursor:text;input{cursor:text;}}}"]),x=t(['[data-element="simple-select-input"] &{input{opacity:0;}input{cursor:pointer;}}']),m=(a,o,e)=>t([""," "," "," "," ",""],x,((a,o)=>t(['&[data-is-transparent="true"]{&&&{background:transparent;border:none;}'," input{text-align:right;position:absolute;padding:var(--global-space-none);&::placeholder{color:var(--colorsUtilityYin100);}}}"],!a&&!o&&t(["cursor:pointer;*{cursor:pointer;}"])))(o,e),h,v,(a=>t([".multi-select &{input{padding:var(--global-space-none);width:30px;}.input-text-container{"," "," ","}}"],"small"===a&&t(["padding:var(--global-space-none) var(--global-space-comp-2-xl) var(--global-space-none) var(--global-space-comp-s);"]),"medium"===a&&t(["padding:var(--global-space-none) 40px var(--global-space-none) var(--global-space-comp-m);"]),"large"===a&&t(["padding:var(--global-space-none) 48px var(--global-space-none) var(--global-space-comp-l);"])))(a)),y=t([".pager-navigation &{margin:4px 8px;height:26px;min-height:unset;.input-text-container{padding:0px;line-height:26px;min-height:24px;input{text-align:center;padding:0;}}}"]),w=t(["&&&{.pager-size-options &{min-height:unset;.input-text-container{width:64px;height:26px;min-height:26px;min-width:10px;margin:0px;.select-text:not(.disabled):not(.read-only){width:calc(100% - 28px);}}}}"]),f=t([""," ",""],y,w),k=t([".numeral-date-wrapper &{.input-text-container input{text-align:center;}}"]),C=t(['[data-component="password"] &{&:focus-within{box-shadow:none !important;-webkit-box-shadow:none !important;outline:none !important;}[data-role="input"]:focus{',' border-radius:var(--global-radius-action-m) var(--global-radius-none) var(--global-radius-none) var(--global-radius-action-m);z-index:1;}[data-role="input"]:focus ~ [data-role="password-divider"]{visibility:hidden;}& [data-component="button"]{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);border-left:none;}}'],a());export{o as dateStyleOverrides,k as numeralDateStyles,f as pagerStyleOverrides,C as passwordStyleOverrides,g as searchNewStyleOverrides,u as searchStyleOverrides,m as selectStyleOverrides};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import a,{css as
|
|
1
|
+
import a,{css as t}from"styled-components";import e from"../../style/utils/add-focus-styling.js";import{dateStyleOverrides as l,searchNewStyleOverrides as o,searchStyleOverrides as r,selectStyleOverrides as i,pagerStyleOverrides as n,numeralDateStyles as d,passwordStyleOverrides as s}from"./input-style-overrides.style.js";const c=a.div.withConfig({displayName:"input.style__InputContainer",componentId:"sc-37242314-0"})([""," "," "," "," "," "," ",' &[data-is-open="true"]{z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );&:focus-within:has(:focus:not(button)){z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );}}',""],(({$align:a,$error:l,$isDisabled:o,$isReadOnly:r,$size:i})=>t(["display:flex;align-items:center;align-self:stretch;max-width:100%;border-radius:var(--global-radius-action-m);"," "," "," &&&{"," ","}"," "," .input-text-container{display:flex;flex-wrap:wrap;align-items:center;flex:1 0 0;max-width:100%;align-self:stretch;input{align-self:stretch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;min-width:0;overflow:hidden;border:none;outline:none;background:transparent;text-overflow:ellipsis;text-align:",";"," "," "," "," "," ",'}[data-element="textbox-prefix"]{font-weight:500;margin-left:var(--global-space-comp-m);}}'],"small"===i&&t(["min-height:var(--global-size-s);"]),"medium"===i&&t(["min-height:var(--global-size-m);"]),"large"===i&&t(["min-height:var(--global-size-l);"]),r&&t(["cursor:default;*{cursor:default;}background:var(--input-typical-bg-read-only);border:var(--global-borderwidth-xs) solid var(--input-typical-border-read-only);&:focus-within:has(:focus:not(button)){"," z-index:2;}"],e()),o&&t(["cursor:not-allowed;background:var(--input-typical-bg-disabled);border:var(--global-borderwidth-xs) solid var(--input-typical-border-disabled);*{cursor:not-allowed;}"]),!o&&!r&&t(["cursor:text;&:focus-within:has(:focus:not(button)){"," z-index:2;}"],e()),!o&&!r&&t(["background:var(--input-typical-bg-default);border:",";"],l?"var(--global-borderwidth-s) solid var(--input-validation-border-error)":"var(--global-borderwidth-xs) solid var(--input-typical-border-default)"),a,r&&t(["color:var(--input-typical-txt-read-only);"]),o&&t(["color:var(--input-typical-txt-disabled);"]),!r&&!o&&t(["color:var(--input-typical-txt-default);"]),"small"===i&&t(["font:var(--global-font-static-comp-regular-s);padding:var(--global-space-none) var(--global-space-comp-s);"]),"medium"===i&&t(["font:var(--global-font-static-comp-regular-m);padding:var(--global-space-none) var(--global-space-comp-m);"]),"large"===i&&t(["font:var(--global-font-static-comp-regular-l);padding:var(--global-space-none) var(--global-space-comp-l);"]))),l,o,r,(({$size:a,$isDisabled:t,$isReadOnly:e})=>i(a,t,e)),n,d,s);export{c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{css as e}from"styled-components";const t=e([".search.inverse &{color:var(--input-labelset-inverse-label-default);}"]),l=e(["",""],t);export{l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as l}from"styled-components";const
|
|
1
|
+
import e,{css as l}from"styled-components";import a from"./label-style-overrides.style.js";const t=e=>{switch(e){case"small":return"var(--global-font-static-comp-medium-s)";case"large":return"var(--global-font-static-comp-medium-l)";default:return"var(--global-font-static-comp-medium-m)"}},r=e.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-9cb7a248-0"})(["",";font:",";"," .numeral-date-wrapper &,.time &{font:var(--global-font-static-comp-regular-m);}",""],(({$disabled:e,$readOnly:l})=>e?"\n cursor: not-allowed;\n color: var(--input-labelset-label-disabled);\n ":l?"\n cursor: pointer;\n color: var(--input-labelset-label-readOnly);\n ":"\n cursor: pointer;\n color: var(--input-labelset-label-default);\n "),(({$size:e})=>t(e)),(({$isRequired:e,$size:a,$disabled:r})=>e&&l(['display:inline-flex;align-items:center;::after{content:"*";color:',";font:",";margin-left:4px;}"],r?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-required)",t(a))),a);export{r as default};
|
package/esm/__internal__/validation-message/__next__/validation-message-style-overrides.style.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{css as e}from"styled-components";const r=e([".search.inverse &{color:var(--input-validation-inverse-label-error);}"]),o=e(["",""],r);export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import a,{css as t}from"styled-components";const
|
|
1
|
+
import a,{css as t}from"styled-components";import l from"./validation-message-style-overrides.style.js";const o=a.span.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-ade67d83-0"})(["",""],(({$isError:a,$size:o})=>t(["display:flex;align-items:center;align-content:center;align-self:stretch;flex-wrap:wrap;margin:0px;color:",";"," "," "," ",""],a?"var(--input-validation-label-error)":"var(--input-validation-label-warn)","large"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-regular-l)"),"medium"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-m)":"var(--global-font-static-comp-regular-m)"),"small"===o&&t(["font:",";"],a?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-regular-s)"),l)));export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as l,getNavigator as s}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as p}from"../button/__next__/button.style.js";const f=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],p),
|
|
1
|
+
import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as l,getNavigator as s}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as p}from"../button/__next__/button.style.js";const f=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.legacy-search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.legacy-search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],p),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-89827ee1-0"})([""," "," &,.popover-menu-item &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({theme:o,color:r,bg:p,isInteractive:g,bgSize:u,bgShape:h,type:y,fontSize:b,disabled:v,tabIndex:_,inverse:C})=>{let j=C?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",k="transparent";const x=l(),S=s(),z=u?m.backgroundSize[u]:void 0;if(v)j="var(--colorsYin030)";else if(r){const{color:t}=n({color:r,theme:o});j=t}if(p){const{backgroundColor:t}=n({bg:p,theme:o});k=t}return t(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],j,k,z,z,h?`border-radius: ${m.backgroundShape[h]}`:"",g&&t(["&:not(:focus):hover{filter:brightness(0.9);}"]),d[y],b&&t(["font-size:",";line-height:",";"],m.iconSize[b],m.iconSize[b]),x&&"services"===y&&c(x)&&t(["margin-top:",";"],"small"===b?"-7px":"-8px"),S&&x&&"services"===y&&a(S)&&!c(x)&&t(["margin-top:-6px;"]),void 0!==_&&`\n :focus {\n ${i()}\n }\n `,e,f)}),p);export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import a from"../icon/icon.style.js";import t from"../button/button.style.js";const i={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},n=o.span.attrs(l).withConfig({displayName:"link.style__StyledLink",componentId:"sc-
|
|
1
|
+
import o,{css as e}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import a from"../icon/icon.style.js";import t from"../button/button.style.js";const i={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},n=o.span.attrs(l).withConfig({displayName:"link.style__StyledLink",componentId:"sc-2960b2ab-0"})(["",""],(({$isSkipLink:o,theme:l,$iconAlign:n,$hasContent:s,$disabled:c,$underline:u,$variant:d,$inverse:b,$isMenuItem:v,$hasFocus:g,$linkSize:f,$bold:p})=>{const m=b?"dark":"light",{color:h,hoverColor:k,focusColor:x,focusBgColor:y,focusBoxShadowColor:C}=i[m](d);return e([""," "," "," > a,> button{"," > ","{display:",";position:relative;vertical-align:middle;}&:focus{outline:none;}}"," > button,",":not(.legacy-search-button){background-color:transparent;border:none;padding:0;}"],o&&e(["a{position:absolute;box-sizing:border-box;display:inline-flex;min-height:var(--global-size-m);padding:var(--global-space-comp-m) var(--global-space-comp-xl);flex-direction:column;justify-content:center;align-items:flex-start;left:-999em;z-index:",";border:var(--global-borderwidth-s) solid var(--focus-borderalt);box-shadow:var(--global-depth-lvl1);border-radius:0 var(--global-radius-action-m) var(--global-radius-action-m) 0;background-color:var(--focus-bg);font:var(--global-font-static-comp-regular-m);color:var(--link-subtle-label-default);text-decoration:underline;outline:none;&:focus{top:var(--global-space-comp-s);left:0;}}"],l.zIndex.aboveAll),!o&&!v&&e(["> a,> button{"," text-decoration:",";"," ","}"],((o,l)=>{let r;return r="large"===o?l?"--global-font-static-comp-lined-medium-l":"--global-font-static-comp-regular-l":l?"--global-font-static-comp-lined-medium-m":"--global-font-static-comp-regular-m",e(["font:var(",");"],r)})(f,p),s&&"always"===u?"underline":"none",!c&&e(["color:",";","{width:20px;height:20px;color:",";::before{font-size:18px;line-height:18px;}"," ","}&:hover{color:",";text-decoration:",";> ","{color:",";}}&:not(:has(img,svg,picture)):focus{color:",";text-decoration:none;","{color:",";}}&:has(img,svg,picture){display:inline-block;vertical-align:middle;}&:has(img,svg,picture):focus{"," border-radius:var(--global-radius-action-xs);outline:default;}"],h,a,h,"left"===n&&e(["margin-right:",";"],s?"var(--global-space-comp-s)":0),"right"===n&&e(["margin-right:0;margin-left:",";"],s?"var(--global-space-comp-s)":0),k,!s||"hover"!==u&&"always"!==u?"none":"underline",a,k,x,a,x,r()),c&&e(["color:var(--colorsActionMajorYin030);&:hover,&:focus{cursor:not-allowed;color:var(--colorsActionMajorYin030);}"])),!c&&e(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),v&&"display: inline-block;",a,s?"inline-block":"inline",!o&&!v&&!c&&g&&e(["max-width:fit-content;&:not(:has(img,svg,picture)){border-radius:var(--global-radius-action-xs);background-color:",";box-shadow:0 var(--global-size-5-xs) 0 0 ",';}&:has([data-popover-container-button="true"]){border-bottom-left-radius:0;border-bottom-right-radius:0;}'],y,C),t)})),s=o.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-2960b2ab-1"})([""]);export{s as StyledContent,n as StyledLink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t,{css as o}from"styled-components";import e from"../../../style/themes/apply-base-theme.js";import i from"../../icon-button/icon-button.style.js";import r from"../../box/box.style.js";import s from"../../search/__internal__/legacy/search.style.js";import l from"../../icon/icon.style.js";import n from"../../button/button.style.js";import a from"../menu.config.js";import d from"../../../style/utils/add-focus-styling.js";import{StyledLink as m}from"../../link/link.style.js";const c=t.div.attrs(e).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"sc-f9ae5d65-0"})(["position:fixed;top:0;bottom:0;"," ",""],(({theme:t})=>o(["z-index:",";"],t.zIndex.fullScreenModal)),(({startPosition:t,transitionDuration:e})=>o(["&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],t,t,e,t,t,e))),b=t.div.attrs(e).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"sc-f9ae5d65-1"})(["height:100vh;width:100vw;outline:none;&&{","{max-width:100vw;}"," > a,"," > button,> div{font-size:var(--fontSizes200);}}",""],m,m,m,(({menuType:t})=>o(["background-color:",";&&&{","{","{display:inline-flex;bottom:auto;}","{display:flex;line-height:normal;padding-bottom:0;&:focus{border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);","}}}}","{scrollbar-color:",";&::-webkit-scrollbar{width:var(--sizing150);}&::-webkit-scrollbar-thumb{background-color:",";}&::-webkit-scrollbar-track{background-color:",";}}"],a[t].background,s,l,n,d(),r,a[t].scrollbarColor,a[t].scrollbarThumb,a[t].scrollbarTrack))),u=t.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"sc-f9ae5d65-2"})(["height:40px;","{position:absolute;z-index:1;right:16px;top:8px;}",""],i,(({menuType:t})=>o(["background-color:",";"],a[t].submenuItemBackground)));export{c as StyledMenuFullscreen,u as StyledMenuFullscreenHeader,b as StyledMenuModal};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-
|
|
1
|
+
import o,{css as n}from"styled-components";import{padding as t}from"styled-system";import r from"../menu.config.js";import{Link as a}from"../../link/link.component.js";import e from"../../button/button.style.js";import i from"../../icon-button/icon-button.style.js";import c from"../../icon/icon.style.js";import{StyledContent as u,StyledLink as s}from"../../link/link.style.js";import p from"../../../style/themes/apply-base-theme.js";import d from"../../../style/utils/add-focus-styling.js";const l=o=>{var n,t;const{paddingRight:r}=o,a=null===(t=String(r))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===r||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(r){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:r};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:r};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:r};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:r};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:r};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:r};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:r};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:r};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},g=o.a.attrs(p).attrs({as:a}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-2ff3820d-0"})([""," &&&{> a,> button{","}}"],(({menuType:o,selected:a,hasSubmenu:p,isOpen:g,menuItemVariant:b,showDropdownArrow:m,href:h,clickToOpen:v,maxWidth:f,inFullscreenView:x,overrideColor:k,asPassiveItem:y,asDiv:w,hasFocusableChild:S,hasInput:C,inSubmenu:M})=>n(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.legacy-search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c,d(!0),u,!k&&n(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],r[o].background),k&&n(["&&&&{background-color:",";}"],"alternate"===b?r[o].alternate:r[o].submenuItemBackground),!x&&n(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],M?"":"justify-content: center;",r[o].background,r[o].color,f&&n(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),e,!w&&!y&&n(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&n(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!x&&n(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.legacy-search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],e,u,e),i,r[o].color),!S&&!x&&n(["",""],p||f?n(["& > a,& > button{padding:11px 16px ",";}"],p&&f?"12px":"10px"):n(["& > a,& > button{padding:11px 16px;}"])),s,s,x&&n(["height:auto;white-space:normal;","{top:-2px;}"],c),s,s,s,!C&&`color: ${r[o].color};`,!x&&n(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c,c),a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],r[o].selected,r[o].selected),"alternate"===b&&!x&&n(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],r[o].alternate,r[o].alternate,!C&&n(["&&& a:hover,&&& button:hover{background-color:",";}"],r[o].alternateHover)),g&&n(["a,button{background-color:",";color:",";}"],r[o].submenuItemBackground,r[o].color),p&&n(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],r[o].submenuBackground,r[o].submenuBackground,r[o].color,r[o].color,v&&g&&n(["background-color:",";"],r[o].submenuOpenedBackground),r[o].submenuOpenedBackground,!(h||v)&&n(["cursor:default;background-color:",";color:",";"],r[o].submenuItemBackground,r[o].color),r[o].color,a&&n(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],r[o].submenuSelected,r[o].submenuSelected),m&&n(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],i,(o=>l(t(o)).padding),(o=>l(t(o)).iconSpacing))),x&&n([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],w&&n(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],r[o].title,r[o].title),!y&&n(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!C&&n(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),t);export{g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o from"styled-components";import r from"../../../button/button.style.js";import t from"../../../icon/icon.style.js";import a from"../../../../style/themes/apply-base-theme.js";const e=o.div.withConfig({displayName:"search-button.style__StyledButtonIcon",componentId:"sc-232ba56c-0"})(["&&& ","{color:var(--colorsActionMajorYang100);margin-right:0px;}"],t),n=o.div.attrs(a).withConfig({displayName:"search-button.style__StyledSearchButton",componentId:"sc-232ba56c-1"})(["display:flex;align-self:end;border-bottom:none;min-width:fit-content;&&& ","{color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorTransparent);border-bottom-left-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);:hover{border-color:var(--colorsActionMajorTransparent);}width:fit-content;","","{color:var(--colorsActionMajorYang100);}margin:0px 0px;padding-bottom:3px;:focus{z-index:1;}}"],r,t,t);export{e as StyledButtonIcon,n as default};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { TagProps } from "../../../../__internal__/utils/helpers/tags";
|
|
4
|
+
import { CommonTextboxProps } from "../../../textbox";
|
|
5
|
+
import { ValidationProps } from "../../../../__internal__/validations";
|
|
6
|
+
export interface SearchEvent {
|
|
7
|
+
target: {
|
|
8
|
+
name?: string;
|
|
9
|
+
id?: string;
|
|
10
|
+
value: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export interface SearchProps extends ValidationProps, MarginProps, TagProps, Pick<CommonTextboxProps, "label" | "inputHint"> {
|
|
14
|
+
/** Prop to specify the aria-label of the search component */
|
|
15
|
+
"aria-label"?: string;
|
|
16
|
+
/** Prop to specify the aria-label of the search button */
|
|
17
|
+
searchButtonAriaLabel?: string;
|
|
18
|
+
/** Prop for `id` */
|
|
19
|
+
id?: string;
|
|
20
|
+
/** Prop for `name` */
|
|
21
|
+
name?: string;
|
|
22
|
+
/** Prop for `onBlur` events */
|
|
23
|
+
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
24
|
+
/** Prop for `onChange` events */
|
|
25
|
+
onChange: (ev: SearchEvent) => void;
|
|
26
|
+
/** Prop for `onClick` events.
|
|
27
|
+
* `onClick` events are triggered when the `searchButton` is clicked
|
|
28
|
+
*/
|
|
29
|
+
onClick?: (ev: SearchEvent) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Sets whether the onClick action should be triggered when the Search cross icon is clicked.
|
|
32
|
+
*/
|
|
33
|
+
triggerOnClear?: boolean;
|
|
34
|
+
/** Prop for `onFocus` events */
|
|
35
|
+
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
36
|
+
/** Prop for `onKeyDown` events */
|
|
37
|
+
onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
38
|
+
/** Prop for a placeholder */
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Pass a boolean to render a search Button with default text.
|
|
42
|
+
* Pass a string to override the text in the search Button
|
|
43
|
+
* */
|
|
44
|
+
searchButton?: boolean | string;
|
|
45
|
+
/** Data tag prop bag for searchButton */
|
|
46
|
+
searchButtonDataProps?: TagProps;
|
|
47
|
+
/**
|
|
48
|
+
* Prop for specifying an input width length.
|
|
49
|
+
* Leaving the `searchWidth` prop with no value will default the width to '100%'
|
|
50
|
+
*/
|
|
51
|
+
searchWidth?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Prop for specifying the max-width of the input.
|
|
54
|
+
* Leaving the `maxWidth` prop with no value will default the width to '100%'
|
|
55
|
+
*/
|
|
56
|
+
maxWidth?: string;
|
|
57
|
+
/** Current value */
|
|
58
|
+
value: string;
|
|
59
|
+
/** Prop to specify the styling of the search component */
|
|
60
|
+
variant?: "default" | "dark";
|
|
61
|
+
/** Input tabindex */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** [Legacy] Overrides the default tooltip position */
|
|
64
|
+
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
65
|
+
}
|
|
66
|
+
export type SearchHandle = {
|
|
67
|
+
/** Programmatically focus on root container of Dialog. */
|
|
68
|
+
focus: () => void;
|
|
69
|
+
} | null;
|
|
70
|
+
export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
|
|
71
|
+
export default Search;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useImperativeHandle as o,useState as a,useMemo as i}from"react";import l from"invariant";import s from"../../../../__internal__/utils/helpers/tags/tags.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../../style/utils/filter-styled-system-margin-props.js";import u from"./search.style.js";import p from"./search-button.style.js";import m from"../../../icon/icon.component.js";import{Textbox as f}from"../../../textbox/textbox.component.js";import h from"../../../button/button.component.js";import b from"../../../../hooks/__internal__/useLocale/useLocale.js";import d from"../../../../__internal__/utils/helpers/events/events.js";function y(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(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){y(e,t,r[t])}))}return e}function v(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 O(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 j=r.forwardRef(((r,y)=>{var{onChange:j,onClick:w,onFocus:P,onBlur:x,onKeyDown:B,value:k,id:_,name:D,label:C,inputHint:S,searchWidth:W,maxWidth:I,searchButton:T,searchButtonDataProps:E,searchButtonAriaLabel:F,placeholder:H,variant:K="default","aria-label":L,tabIndex:N,error:A,warning:$,info:z,tooltipPosition:M,triggerOnClear:R}=r,V=O(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 q=b(),G=n(null),J=n(null);o(y,(()=>({focus(){var e;null===(e=J.current)||void 0===e||e.focus()}})),[]),l("string"==typeof k,"This component has no initial value");const[Q,U]=a(!1),X=0===k.length;let Y={};T&&w&&(Y={onClick:()=>{w({target:{name:D,id:_,value:k}})}});const Z="string"==typeof T?T:q.search.searchButtonText(),ee=!!(null==k?void 0:k.length),{className:te}=V,re=O(V,["className"]),ne=i((()=>["legacy-search",ee?"has-value":void 0,"dark"===K?"dark-background":void 0,T?"with-button":void 0,te].filter(Boolean).join(" ")),[ee,K,T,te]);return e(u,v(g({ref:G,isFocused:Q,searchWidth:W,maxWidth:I,searchHasValue:ee,showSearchButton:!!T,variant:K,id:_,name:D},re,c(re),s("search",re)),{className:ne,children:[t(f,{placeholder:H,value:k,inputIcon:X?void 0:"cross",iconTabIndex:X?-1:0,iconOnClick:()=>{var e;null==j||j({target:v(g({},D&&{name:D},_&&{id:_}),{value:""})}),R&&(null==w||w({target:v(g({},D&&{name:D},_&&{id:_}),{value:""})})),null===(e=J.current)||void 0===e||e.focus()},iconOnMouseDown:e=>{e.preventDefault()},"aria-label":L||(C?void 0:q.search.searchButtonText()),label:C,inputHint:S,onFocus:e=>{U(!0),P&&P(e)},onBlur:e=>{U(!1),x&&x(e)},onChange:e=>{j(e)},onKeyDown:e=>{1===e.key.length&&e.stopPropagation(),d.isEscKey(e)&&!X&&(e.stopPropagation(),null==j||j({target:v(g({},D&&{name:D},_&&{id:_}),{value:""})})),B&&B(e)},ref:J,tabIndex:N,error:A,warning:$,info:z,leftChildren:T?void 0:t(m,{type:"search",ml:1}),tooltipPosition:M,my:0,maxWidth:"100%"}),T&&t(p,{children:t(h,v(g({"aria-label":F||Z,size:"medium",px:2,buttonType:"primary",iconPosition:"before",iconType:"search",className:"legacy-search-button"},s(`${Z}-button`,g({"data-element":`${Z}-button`},E)),Y),{children:Z}))})]}))}));export{j as Search,j as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{margin as o}from"styled-system";import r,{css as t}from"styled-components";import a from"../../../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import e from"../../../icon/icon.style.js";import i from"../../../../style/themes/apply-base-theme.js";import n from"../../../../__internal__/form-field/form-field.style.js";const s=r.div.attrs(i).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-a8478a22-0"})(["",""],(({isFocused:r,searchWidth:i,maxWidth:s,searchHasValue:l,showSearchButton:c,variant:m})=>{const d="dark"===m;return t(["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;}","{","}"],o,i?`${i}`:"100%",s?`${s}`:"100%",!c&&t(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],d?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)",d?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(l||r)&&t(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),n,e,d&&!c&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!d&&t(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),a,l&&t(["margin-bottom:-1px;"]))}));export{s as default};
|
|
@@ -10,34 +10,23 @@ export interface SearchEvent {
|
|
|
10
10
|
value: string;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
export
|
|
14
|
-
|
|
13
|
+
export type SearchTextboxProps = Pick<CommonTextboxProps, "tooltipPosition" | "name" | "id" | "onFocus" | "onKeyDown" | "onBlur" | "label" | "inputHint" | "size" | "inputWidth" | "className" | "labelInline" | "required">;
|
|
14
|
+
export interface SearchProps extends ValidationProps, MarginProps, TagProps, SearchTextboxProps {
|
|
15
|
+
/** Prop to specify the accessible name of the Search input. To be used when no visible label is provided */
|
|
15
16
|
"aria-label"?: string;
|
|
16
|
-
/** Prop to specify the
|
|
17
|
+
/** Prop to specify the accessible name of the Search button */
|
|
17
18
|
searchButtonAriaLabel?: string;
|
|
18
|
-
/** Prop for `
|
|
19
|
-
id?: string;
|
|
20
|
-
/** Prop for `name` */
|
|
21
|
-
name?: string;
|
|
22
|
-
/** Prop for `onBlur` events */
|
|
23
|
-
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
24
|
-
/** Prop for `onChange` events */
|
|
19
|
+
/** Prop for `onChange` events on the Search input */
|
|
25
20
|
onChange: (ev: SearchEvent) => void;
|
|
26
|
-
/** Prop for `onClick` events.
|
|
27
|
-
* `onClick` events are triggered when the
|
|
21
|
+
/** Prop for `onClick` events on the Search button.
|
|
22
|
+
* `onClick` events are triggered when the Search button is clicked
|
|
23
|
+
* or when the Search input's cross icon is clicked if the `triggerOnClear` prop is set to `true`.
|
|
28
24
|
*/
|
|
29
25
|
onClick?: (ev: SearchEvent) => void;
|
|
30
|
-
/**
|
|
31
|
-
* Sets whether the onClick action should be triggered when the Search cross icon is clicked.
|
|
32
|
-
*/
|
|
26
|
+
/** Sets whether the `onClick` action should be triggered when the Search cross icon is clicked. */
|
|
33
27
|
triggerOnClear?: boolean;
|
|
34
|
-
/** Prop for `onFocus` events */
|
|
35
|
-
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
36
|
-
/** Prop for `onKeyDown` events */
|
|
37
|
-
onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
38
|
-
/** Prop for a placeholder */
|
|
39
|
-
placeholder?: string;
|
|
40
28
|
/**
|
|
29
|
+
* @deprecated This prop no longer has any effect. This prop will eventually be removed.
|
|
41
30
|
* Pass a boolean to render a search Button with default text.
|
|
42
31
|
* Pass a string to override the text in the search Button
|
|
43
32
|
* */
|
|
@@ -45,27 +34,34 @@ export interface SearchProps extends ValidationProps, MarginProps, TagProps, Pic
|
|
|
45
34
|
/** Data tag prop bag for searchButton */
|
|
46
35
|
searchButtonDataProps?: TagProps;
|
|
47
36
|
/**
|
|
48
|
-
*
|
|
37
|
+
* @deprecated This prop no longer has any effect. This prop will eventually be removed. Use `inputWidth` instead.
|
|
38
|
+
* Prop for specifying the width of the Search container. This value is mapped to `inputWidth`.
|
|
49
39
|
* Leaving the `searchWidth` prop with no value will default the width to '100%'
|
|
50
40
|
*/
|
|
51
41
|
searchWidth?: string;
|
|
52
42
|
/**
|
|
53
|
-
* Prop for specifying the max-width of the input.
|
|
43
|
+
* Prop for specifying the max-width of the Search input.
|
|
54
44
|
* Leaving the `maxWidth` prop with no value will default the width to '100%'
|
|
55
45
|
*/
|
|
56
46
|
maxWidth?: string;
|
|
47
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. */
|
|
48
|
+
placeholder?: CommonTextboxProps["placeholder"];
|
|
57
49
|
/** Current value */
|
|
58
50
|
value: string;
|
|
59
|
-
/**
|
|
51
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. `variant="dark"` is mapped to `inverse={true}` to preserve legacy behavior. */
|
|
60
52
|
variant?: "default" | "dark";
|
|
61
|
-
/** Input tabindex */
|
|
53
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. Input tabindex */
|
|
62
54
|
tabIndex?: number;
|
|
63
|
-
/**
|
|
64
|
-
|
|
55
|
+
/** When set to `true`, inverts the Search input and button styling for use on darker backgrounds. */
|
|
56
|
+
inverse?: boolean;
|
|
57
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. */
|
|
58
|
+
warning?: CommonTextboxProps["warning"];
|
|
65
59
|
}
|
|
66
60
|
export type SearchHandle = {
|
|
67
|
-
/** Programmatically focus
|
|
61
|
+
/** Programmatically focus the search input. */
|
|
68
62
|
focus: () => void;
|
|
63
|
+
/** Programmatically focus the search button. */
|
|
64
|
+
focusButton: () => void;
|
|
69
65
|
} | null;
|
|
70
66
|
export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
|
|
71
67
|
export default Search;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import n,{useRef as a,useContext as o,useImperativeHandle as i,useEffect as l,useMemo as c}from"react";import s from"invariant";import u from"../../__internal__/utils/helpers/tags/tags.js";import{Button as p}from"../button/__next__/button.component.js";import h from"../../hooks/__internal__/useLocale/useLocale.js";import{Divider as m}from"../divider/divider.component.js";import{TextInput as d}from"../textbox/__internal__/__next__/text-input.component.js";import b from"../menu/__internal__/menu.context.js";import{Search as f}from"./__internal__/legacy/search.component.js";function v(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function g(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){v(e,r,t[r])}))}return e}function y(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const O=n.forwardRef(((n,v)=>{var{onChange:O,onClick:_,triggerOnClear:j,value:P,id:x,name:w,label:B,placeholder:k,searchButtonDataProps:C,searchButtonAriaLabel:L,"aria-label":W,variant:E,inverse:N,error:D,size:S,inputWidth:I,searchButton:T,searchWidth:z,maxWidth:A,tabIndex:$,tooltipPosition:F,warning:M,className:R}=n,q=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["onChange","onClick","triggerOnClear","value","id","name","label","placeholder","searchButtonDataProps","searchButtonAriaLabel","aria-label","variant","inverse","error","size","inputWidth","searchButton","searchWidth","maxWidth","tabIndex","tooltipPosition","warning","className"]);const G=h(),H=a(null),J=a(null),K=a(null),{inMenu:Q}=o(b);i(v,(()=>({focus(){var e,r;Q?null===(r=K.current)||void 0===r||r.focus():null===(e=H.current)||void 0===e||e.focus()},focusButton(){var e;null===(e=J.current)||void 0===e||e.focusButton()}})),[Q]),s("string"==typeof P,"This component has no initial value");const U=G.search.searchButtonText();l((()=>{if(!j||!_)return;const e=H.current;if(!e)return;const r={current:!1},t=e=>{r.current="Enter"===e.key},n=e=>{const t=e.target;t.value||r.current||_({target:y(g({},w&&{name:w},x&&{id:x}),{value:t.value})}),r.current=!1};return e.addEventListener("keydown",t),e.addEventListener("search",n),()=>{e.removeEventListener("keydown",t),e.removeEventListener("search",n)}}),[j,_,w,x]);const V=null!=I?I:(e=>{if(!e)return;const r=Number.parseFloat(e);return Number.isNaN(r)?void 0:r})(z),X={searchButton:T,searchWidth:z,tabIndex:$,tooltipPosition:F,warning:M},Y=c((()=>["search",N||"dark"===E?"inverse":void 0,D?"error":void 0,R].filter(Boolean).join(" ")),[N,E,R,D]);return Q?e(f,y(g({},q,X),{onChange:O,value:P,id:x,error:D,placeholder:k,name:w,label:B,variant:E,"aria-label":W,searchButtonAriaLabel:L,searchButtonDataProps:C,triggerOnClear:j,onClick:_,ref:K})):e(d,y(g({},q,u("search",q)),{className:Y,id:x,name:w,type:"search",label:B||"",onChange:O,value:P,size:S,inputWidth:V,maxWidth:A,error:D,"aria-label":W||(B?void 0:G.search.searchButtonText()),ref:H,inputIcon:r(t,{children:[e(m,{"aria-hidden":!0,"data-role":"search-divider",height:`calc(100% - var(--global-space-comp-${(null==S?void 0:S.charAt(0))||"m"}))`,p:0,type:"vertical"}),e(p,g({ref:J,"aria-label":L||U,className:"search-button",iconType:"search",inverse:N,size:S,variant:"default",variantType:"subtle"},u(`${U}-button`,g({"data-element":`${U}-button`},C)),_&&{onClick:()=>_({target:{name:w,id:x,value:P}})}))]})}))}));export{O as Search,O as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useContext as n,useCallback as o}from"react";import a from"../../../../__internal__/input/input.component.js";import l from"../../../../__internal__/validation-message/__next__/validation-message.component.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../../style/utils/filter-styled-system-margin-props.js";import d from"../../../../style/utils/filter-out-styled-system-spacing-props.js";import p from"../../../../hooks/__internal__/useUniqueId/index.js";import c from"../../../../__internal__/utils/helpers/guid/index.js";import u from"../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import m from"../../../../__internal__/error-border/error-border.style.js";import{StyledTextInput as b,LabelWrapper as f,InputWrapper as y}from"./text-input.style.js";import{HintText as _}from"../../../../__internal__/hint-text/hint-text.component.js";import h from"../../../../__internal__/label/label.component.js";import j from"../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js";import g from"../../../../__internal__/utils/helpers/combine-refs/index.js";import O from"../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js";import v from"../../../fieldset/__internal__/fieldset.context.js";function x(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function w(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){x(e,r,t[r])}))}return e}function I(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const P=t.forwardRef(((t,x)=>{var{autoFocus:P,"aria-describedby":$,"aria-labelledby":k,children:z,"data-component":
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useContext as n,useCallback as o}from"react";import a from"../../../../__internal__/input/input.component.js";import l from"../../../../__internal__/validation-message/__next__/validation-message.component.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../../style/utils/filter-styled-system-margin-props.js";import d from"../../../../style/utils/filter-out-styled-system-spacing-props.js";import p from"../../../../hooks/__internal__/useUniqueId/index.js";import c from"../../../../__internal__/utils/helpers/guid/index.js";import u from"../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import m from"../../../../__internal__/error-border/error-border.style.js";import{StyledTextInput as b,LabelWrapper as f,InputWrapper as y}from"./text-input.style.js";import{HintText as _}from"../../../../__internal__/hint-text/hint-text.component.js";import h from"../../../../__internal__/label/label.component.js";import j from"../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js";import g from"../../../../__internal__/utils/helpers/combine-refs/index.js";import O from"../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js";import v from"../../../fieldset/__internal__/fieldset.context.js";function x(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function w(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){x(e,r,t[r])}))}return e}function I(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const P=t.forwardRef(((t,x)=>{var{autoFocus:P,"aria-describedby":$,"aria-labelledby":k,children:z,className:C,"data-component":D="text-input","data-element":W,"data-is-open":T,"data-role":q,disabled:E,error:S,id:F,inputHint:M,inputIcon:R,inputWidth:N,label:B,labelInline:V=!1,leftChildren:A,maxWidth:H,name:U,onChange:G,onClick:J,onMouseDown:K,placeholder:L,prefix:Q,readOnly:X,required:Y,size:Z="medium",type:ee="text",validationMessagePositionTop:re,value:te,warning:ie}=t,ne=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["autoFocus","aria-describedby","aria-labelledby","children","className","data-component","data-element","data-is-open","data-role","disabled","error","id","inputHint","inputIcon","inputWidth","label","labelInline","leftChildren","maxWidth","name","onChange","onClick","onMouseDown","placeholder","prefix","readOnly","required","size","type","validationMessagePositionTop","value","warning"]);const oe=i(null),ae=g(x,oe),{disableErrorBorder:le}=n(O),se={disabled:E,readOnly:X},[de,pe]=p(F,U),{labelId:ce,validationId:ue,ariaDescribedBy:me}=u({id:de,validationRedesignOptIn:!0,error:S,warning:ie,label:B}),be=i(c()),fe=M?be.current:void 0,ye=Q?`${de}-prefix`:void 0,{size:_e,hasError:he,required:je}=n(v),ge=_e||Z,Oe=!!S||!!he,ve=null!=N?N:V?80:100,xe=[fe,ye,me,$].filter(Boolean).join(" "),we=!(!S&&!ie);j(!!S,!!ie,de);const Ie=we&&!le&&r(l,{id:ue,size:ge,error:S,warning:ie}),Pe=we&&!le&&r(m,{"data-role":"error-border",$warning:!(S||!ie)}),$e=o((e=>{E||X||null==K||K(e)}),[K,E,X]),ke=o((e=>{E||X||null==J||J(e)}),[J,E,X]),ze=o((e=>{var r;E||X||document.activeElement===oe.current||!e.currentTarget.contains(e.target)||null===(r=oe.current)||void 0===r||r.focus()}),[E,X]);return e(b,I(w({className:C,"data-element":W,"data-role":q,"data-component":D,$size:ge,$labelInline:V,$hasValidationFailure:V&&we},s(ne)),{children:[B&&e(f,{"data-role":"label-wrapper",$labelInline:V,$size:ge,$labelWrapperWidth:V&&"number"==typeof ve?100-ve:void 0,children:[r(h,I(w({id:ce,htmlFor:de,size:ge,isRequired:Y},se),{children:B})),M&&r(_,I(w({id:fe,size:ge},se),{children:M}))]}),e(y,{"data-role":"input-wrapper",$size:ge,$maxWidth:H,$inputWidth:N,onClick:ze,"data-is-open":T,children:[re&&Ie,r(a,I(w({id:de,name:pe,className:C,"aria-invalid":Oe,"aria-describedby":xe,"aria-labelledby":k,value:te,placeholder:E||X?void 0:L,required:Y||je,ref:ae,autoFocus:P,onMouseDown:$e,onClick:ke,onChange:G,error:Oe,inputIcon:R,size:ge,prefix:Q,prefixId:ye,leftChildren:A,type:ee,"data-is-open":T},se,d(ne)),{children:z})),!re&&Ie,Pe]})]}))}));export{P as TextInput,P as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import l from"../../../../style/themes/apply-base-theme.js";const i=e.div.attrs(l).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"sc-
|
|
1
|
+
import e,{css as a}from"styled-components";import{margin as t}from"styled-system";import l from"../../../../style/themes/apply-base-theme.js";const i=e.div.attrs(l).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"sc-3d83f5ed-0"})(['[data-component="inline-inputs"] &,&[data-element="current-page"]{--fieldSpacing:0px;}margin-bottom:var(--fieldSpacing);'," display:flex;align-items:flex-start;flex-direction:",";gap:",";.fieldset-content &{gap:var(--global-space-comp-xs);}.time &{gap:unset;}.legacy-search &{flex:1 1 0%;}"],t,(({$labelInline:e})=>e?"row":"column"),(({$labelInline:e,$size:a,$hasValidationFailure:t})=>{if(!e)switch(a){case"small":return"var(--global-space-comp-xs)";case"large":return"var(--global-space-comp-m)";default:return"var(--global-space-comp-s)"}return"large"===a?t?"var(--global-space-comp-l)":"var(--global-space-comp-m)":t?"var(--global-space-comp-l)":"var(--global-space-comp-s)"})),n=e.div.withConfig({displayName:"text-input.style__LabelWrapper",componentId:"sc-3d83f5ed-1"})([""," display:flex;flex-direction:column;align-self:stretch;",""],(({$labelWrapperWidth:e})=>e&&`\n --label-spacing: ${e}%;\n\n [data-component="date-range"] & {\n --label-spacing: ${2*e}%;\n }\n `),(({$labelInline:e,$size:t})=>a([""," ",""],e&&a(["padding-top:var(--global-space-comp-",");justify-content:flex-start;align-items:flex-end;align-self:stretch;width:var(--label-spacing,auto);"],t.charAt(0)),!e&&a(["justify-content:flex-end;align-items:flex-start;"])))),s=e.div.withConfig({displayName:"text-input.style__InputWrapper",componentId:"sc-3d83f5ed-2"})(["display:flex;flex-direction:column;position:relative;width:100%;min-width:0;gap:",";",""],(({$size:e})=>"small"===e?"var(--global-space-comp-xs)":"var(--global-space-comp-s)"),(({$maxWidth:e,$inputWidth:t})=>a([""," width:",";"],e&&`max-width: ${e};`,t?`${t}%`:"100%")));export{s as InputWrapper,n as LabelWrapper,i as StyledTextInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");const s=e.css([".search.inverse &{color:var(--input-labelset-inverse-label-alt);}"]),r=e.css(["",""],s);exports.default=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./hint-text-style-overrides.style.js");function l(e){return e&&e.__esModule?e:{default:e}}const a=l(e).default.span.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-25859ede-0"})(["color:",";font:",";",""],(({$disabled:e})=>e?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-alt)"),(({$size:e})=>(e=>{switch(e){case"small":return"var(--global-font-static-comp-regular-s)";case"large":return"var(--global-font-static-comp-regular-l)";default:return"var(--global-font-static-comp-regular-m)"}})(e)),t.default);exports.default=a;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export declare const dateStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
5
5
|
export declare const searchStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
6
|
+
export declare const searchNewStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
6
7
|
export declare const selectStyleOverrides: ($size?: string, $isDisabled?: boolean, $isReadOnly?: boolean) => import("styled-components").FlattenSimpleInterpolation;
|
|
7
8
|
export declare const pagerStyleOverrides: import("styled-components").FlattenSimpleInterpolation;
|
|
8
9
|
export declare const numeralDateStyles: import("styled-components").FlattenSimpleInterpolation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("styled-components"),
|
|
1
|
+
"use strict";var t=require("styled-components"),e=require("../../style/utils/add-focus-styling.js");const a=t.css([".date &{.input-text-container input{padding:0 0 0 12px;margin-right:-12px;}}"]),r="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.9497 5.05022C15.3403 5.44074 15.3403 6.07391 14.9497 6.46443L11.4142 9.99997L14.9497 13.5355C15.3403 13.926 15.3403 14.5592 14.9497 14.9497C14.5592 15.3402 13.9261 15.3402 13.5355 14.9497L10 11.4142L6.46446 14.9497C6.07394 15.3402 5.44077 15.3402 5.05025 14.9497C4.65972 14.5592 4.65972 13.926 5.05025 13.5355L8.58578 9.99997L5.05025 6.46443C4.65972 6.07391 4.65972 5.44074 5.05025 5.05022C5.44077 4.65969 6.07394 4.65969 6.46446 5.05022L10 8.58575L13.5355 5.05022C13.9261 4.65969 14.5592 4.65969 14.9497 5.05022Z'/%3E%3C/svg%3E\")",o=t.css([".legacy-search &{height:40px;box-sizing:border-box;.input-text-container{flex-wrap:wrap;}input{width:30px;}}"]),n=t.css([".legacy-search:not(.with-button):not(.has-value) &:not(:focus-within){border-color:transparent;background:transparent;}"]),i=t.css([".legacy-search.with-button &{border-top-right-radius:0;border-bottom-right-radius:0;}"]),s=t.css([".legacy-search.dark-background &{input{::-moz-placeholder{color:var(--colorsUtilityYang080);opacity:1;}::placeholder{color:var(--colorsUtilityYang080);}}}"]),l=t.css([".legacy-search.dark-background:not(.with-button) &{input{color:var(--input-typical-inverse-txt-default);}}.legacy-search.dark-background.has-value:not(.with-button) &{.input-text-container,input{color:var(--colorsUtilityYang080);}.input-text-container:hover{input{color:var(--colorsUtilityYang100);}}}"]),c=t.css([".legacy-search.dark-background.with-button:not(.has-value) &{input{color:var(--colorsUtilityYang100);}}"]),p=t.css([".legacy-search.dark-background:not(.with-button) &{background-color:transparent;border-color:var(--colorsUtilityYang080);}"]),u=t.css([""," "," "," "," "," "," ",""],o,n,i,s,l,c,p),d=t.css(['.search &{--search-clear-icon-color:var(--button-typical-subtle-label-default);--search-button-icon-color:var(--button-typical-subtle-label-default);--search-button-hover-bg:var(--button-typical-subtle-bg-hover);--search-button-hover-icon-color:var(--button-typical-subtle-label-hover);input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:var(--global-size-2-xs);height:var(--global-size-2-xs);background-color:var(--search-clear-icon-color);-webkit-mask:center / contain no-repeat ',";mask:center / contain no-repeat ",';cursor:pointer;}button{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);}button:hover{background-color:var(--search-button-hover-bg);}button span[type="search"]{color:var(--search-button-icon-color);}button:hover span[type="search"]{color:var(--search-button-hover-icon-color);}&:focus-within:has(:focus:not(button)){box-shadow:none;-webkit-box-shadow:none;}.input-text-container input[type="search"]:focus{border-radius:var(--global-radius-action-m) 0 0 var(--global-radius-action-m);'," z-index:2;}}"],r,r,e.default()),b=t.css(['.search.inverse &{--search-clear-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-icon-color:var( --button-typical-subtle-inverse-label-default );--search-button-hover-bg:var(--button-typical-subtle-inverse-bg-hover);--search-button-hover-icon-color:var( --button-typical-subtle-inverse-label-hover );background-color:var(--input-typical-inverse-bg-default);&[data-role="input-container"]{border-color:var(--input-typical-inverse-border-default);}.input-text-container input[type="search"]{color:var(--input-typical-inverse-txt-default);}}.search.inverse.error &{border-color:var(--input-validation-inverse-border-error);}']),g=t.css([""," ",""],d,b),v=t.css(['[data-role="select-textbox"] &[data-is-transparent="false"]{.input-text-container{position:relative;.select-text:not(.disabled):not(.read-only){position:absolute;top:0;left:0;width:calc(100% - 48px);height:100%;padding:var(--global-space-none) var(--global-space-none) var(--global-space-none) var(--global-space-comp-m);cursor:pointer;}}}']),h=t.css([".multi-select &,.filterable-select &{.input-text-container:not(.disabled):not(.read-only){cursor:text;input{cursor:text;}}}"]),x=t.css(['[data-element="simple-select-input"] &{input{opacity:0;}input{cursor:pointer;}}']),y=t.css([".pager-navigation &{margin:4px 8px;height:26px;min-height:unset;.input-text-container{padding:0px;line-height:26px;min-height:24px;input{text-align:center;padding:0;}}}"]),m=t.css(["&&&{.pager-size-options &{min-height:unset;.input-text-container{width:64px;height:26px;min-height:26px;min-width:10px;margin:0px;.select-text:not(.disabled):not(.read-only){width:calc(100% - 28px);}}}}"]),w=t.css([""," ",""],y,m),f=t.css([".numeral-date-wrapper &{.input-text-container input{text-align:center;}}"]),k=t.css(['[data-component="password"] &{&:focus-within{box-shadow:none !important;-webkit-box-shadow:none !important;outline:none !important;}[data-role="input"]:focus{',' border-radius:var(--global-radius-action-m) var(--global-radius-none) var(--global-radius-none) var(--global-radius-action-m);z-index:1;}[data-role="input"]:focus ~ [data-role="password-divider"]{visibility:hidden;}& [data-component="button"]{border-radius:var(--global-radius-none) var(--global-radius-action-m) var(--global-radius-action-m) var(--global-radius-none);border-left:none;}}'],e.default());exports.dateStyleOverrides=a,exports.numeralDateStyles=f,exports.pagerStyleOverrides=w,exports.passwordStyleOverrides=k,exports.searchNewStyleOverrides=g,exports.searchStyleOverrides=u,exports.selectStyleOverrides=(e,a,r)=>t.css([""," "," "," "," ",""],x,((e,a)=>t.css(['&[data-is-transparent="true"]{&&&{background:transparent;border:none;}'," input{text-align:right;position:absolute;padding:var(--global-space-none);&::placeholder{color:var(--colorsUtilityYin100);}}}"],!e&&!a&&t.css(["cursor:pointer;*{cursor:pointer;}"])))(a,r),v,h,(e=>t.css([".multi-select &{input{padding:var(--global-space-none);width:30px;}.input-text-container{"," "," ","}}"],"small"===e&&t.css(["padding:var(--global-space-none) var(--global-space-comp-2-xl) var(--global-space-none) var(--global-space-comp-s);"]),"medium"===e&&t.css(["padding:var(--global-space-none) 40px var(--global-space-none) var(--global-space-comp-m);"]),"large"===e&&t.css(["padding:var(--global-space-none) 48px var(--global-space-none) var(--global-space-comp-l);"])))(e));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),a=require("../../style/utils/add-focus-styling.js"),r=require("./input-style-overrides.style.js");function t(e){return e&&e.__esModule?e:{default:e}}const l=t(e).default.div.withConfig({displayName:"input.style__InputContainer",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),a=require("../../style/utils/add-focus-styling.js"),r=require("./input-style-overrides.style.js");function t(e){return e&&e.__esModule?e:{default:e}}const l=t(e).default.div.withConfig({displayName:"input.style__InputContainer",componentId:"sc-37242314-0"})([""," "," "," "," "," "," ",' &[data-is-open="true"]{z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );&:focus-within:has(:focus:not(button)){z-index:var( --adaptiveSidebarModalBackdrop,var(--carbon-zindex-above-all) );}}',""],(({$align:r,$error:t,$isDisabled:l,$isReadOnly:i,$size:s})=>e.css(["display:flex;align-items:center;align-self:stretch;max-width:100%;border-radius:var(--global-radius-action-m);"," "," "," &&&{"," ","}"," "," .input-text-container{display:flex;flex-wrap:wrap;align-items:center;flex:1 0 0;max-width:100%;align-self:stretch;input{align-self:stretch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;min-width:0;overflow:hidden;border:none;outline:none;background:transparent;text-overflow:ellipsis;text-align:",";"," "," "," "," "," ",'}[data-element="textbox-prefix"]{font-weight:500;margin-left:var(--global-space-comp-m);}}'],"small"===s&&e.css(["min-height:var(--global-size-s);"]),"medium"===s&&e.css(["min-height:var(--global-size-m);"]),"large"===s&&e.css(["min-height:var(--global-size-l);"]),i&&e.css(["cursor:default;*{cursor:default;}background:var(--input-typical-bg-read-only);border:var(--global-borderwidth-xs) solid var(--input-typical-border-read-only);&:focus-within:has(:focus:not(button)){"," z-index:2;}"],a.default()),l&&e.css(["cursor:not-allowed;background:var(--input-typical-bg-disabled);border:var(--global-borderwidth-xs) solid var(--input-typical-border-disabled);*{cursor:not-allowed;}"]),!l&&!i&&e.css(["cursor:text;&:focus-within:has(:focus:not(button)){"," z-index:2;}"],a.default()),!l&&!i&&e.css(["background:var(--input-typical-bg-default);border:",";"],t?"var(--global-borderwidth-s) solid var(--input-validation-border-error)":"var(--global-borderwidth-xs) solid var(--input-typical-border-default)"),r,i&&e.css(["color:var(--input-typical-txt-read-only);"]),l&&e.css(["color:var(--input-typical-txt-disabled);"]),!i&&!l&&e.css(["color:var(--input-typical-txt-default);"]),"small"===s&&e.css(["font:var(--global-font-static-comp-regular-s);padding:var(--global-space-none) var(--global-space-comp-s);"]),"medium"===s&&e.css(["font:var(--global-font-static-comp-regular-m);padding:var(--global-space-none) var(--global-space-comp-m);"]),"large"===s&&e.css(["font:var(--global-font-static-comp-regular-l);padding:var(--global-space-none) var(--global-space-comp-l);"]))),r.dateStyleOverrides,r.searchNewStyleOverrides,r.searchStyleOverrides,(({$size:e,$isDisabled:a,$isReadOnly:t})=>r.selectStyleOverrides(e,a,t)),r.pagerStyleOverrides,r.numeralDateStyles,r.passwordStyleOverrides);exports.default=l;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");const s=e.css([".search.inverse &{color:var(--input-labelset-inverse-label-default);}"]),r=e.css(["",""],s);exports.default=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),l=require("./label-style-overrides.style.js");function t(e){return e&&e.__esModule?e:{default:e}}const a=e=>{switch(e){case"small":return"var(--global-font-static-comp-medium-s)";case"large":return"var(--global-font-static-comp-medium-l)";default:return"var(--global-font-static-comp-medium-m)"}},r=t(e).default.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-9cb7a248-0"})(["",";font:",";"," .numeral-date-wrapper &,.time &{font:var(--global-font-static-comp-regular-m);}",""],(({$disabled:e,$readOnly:l})=>e?"\n cursor: not-allowed;\n color: var(--input-labelset-label-disabled);\n ":l?"\n cursor: pointer;\n color: var(--input-labelset-label-readOnly);\n ":"\n cursor: pointer;\n color: var(--input-labelset-label-default);\n "),(({$size:e})=>a(e)),(({$isRequired:l,$size:t,$disabled:r})=>l&&e.css(['display:inline-flex;align-items:center;::after{content:"*";color:',";font:",";margin-left:4px;}"],r?"var(--input-labelset-label-disabled)":"var(--input-labelset-label-required)",a(t))),l.default);exports.default=r;
|
package/lib/__internal__/validation-message/__next__/validation-message-style-overrides.style.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");const r=e.css([".search.inverse &{color:var(--input-validation-inverse-label-error);}"]),s=e.css(["",""],r);exports.default=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),a=require("./validation-message-style-overrides.style.js");function t(e){return e&&e.__esModule?e:{default:e}}const l=t(e).default.span.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-ade67d83-0"})(["",""],(({$isError:t,$size:l})=>e.css(["display:flex;align-items:center;align-content:center;align-self:stretch;flex-wrap:wrap;margin:0px;color:",";"," "," "," ",""],t?"var(--input-validation-label-error)":"var(--input-validation-label-warn)","large"===l&&e.css(["font:",";"],t?"var(--global-font-static-comp-medium-l)":"var(--global-font-static-comp-regular-l)"),"medium"===l&&e.css(["font:",";"],t?"var(--global-font-static-comp-medium-m)":"var(--global-font-static-comp-regular-m)"),"small"===l&&e.css(["font:",";"],t?"var(--global-font-static-comp-medium-s)":"var(--global-font-static-comp-regular-s)"),a.default)));exports.default=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),s=require("./icon-config.js"),c=require("./icon-unicodes.js"),a=require("../button/__next__/button.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var d=u(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],a.StyledButton),m=d.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),s=require("./icon-config.js"),c=require("./icon-unicodes.js"),a=require("../button/__next__/button.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var d=u(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.legacy-search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.legacy-search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}.button-toggle &&{color:currentColor;}"],a.StyledButton),m=d.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-89827ee1-0"})([""," "," &,.popover-menu-item &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({theme:o,color:a,bg:u,isInteractive:d,bgSize:m,bgShape:g,type:y,fontSize:h,disabled:v,tabIndex:b,inverse:p})=>{let _=p?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",S="transparent";const j=n.getWindow(),q=n.getNavigator(),x=m?s.default.backgroundSize[m]:void 0;if(v)_="var(--colorsYin030)";else if(a){const{color:e}=i.default({color:a,theme:o});_=e}if(u){const{backgroundColor:e}=i.default({bg:u,theme:o});S=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," "," ",""],_,S,x,x,g?`border-radius: ${s.default.backgroundShape[g]}`:"",d&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),c.default[y],h&&e.css(["font-size:",";line-height:",";"],s.default.iconSize[h],s.default.iconSize[h]),j&&"services"===y&&l.default(j)&&e.css(["margin-top:",";"],"small"===h?"-7px":"-8px"),q&&j&&"services"===y&&l.isSafari(q)&&!l.default(j)&&e.css(["margin-top:-6px;"]),void 0!==b&&`\n :focus {\n ${r.default()}\n }\n `,t.margin,f)}),a.StyledButton);exports.default=m;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var o=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/add-focus-styling.js"),r=require("../icon/icon.style.js"),a=require("../button/button.style.js");function t(o){return o&&o.__esModule?o:{default:o}}var i=t(o);const n={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},s=i.default.span.attrs(e.default).withConfig({displayName:"link.style__StyledLink",componentId:"sc-
|
|
1
|
+
"use strict";var o=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),l=require("../../style/utils/add-focus-styling.js"),r=require("../icon/icon.style.js"),a=require("../button/button.style.js");function t(o){return o&&o.__esModule?o:{default:o}}var i=t(o);const n={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},s=i.default.span.attrs(e.default).withConfig({displayName:"link.style__StyledLink",componentId:"sc-2960b2ab-0"})(["",""],(({$isSkipLink:e,theme:t,$iconAlign:i,$hasContent:s,$disabled:c,$underline:u,$variant:d,$inverse:b,$isMenuItem:v,$hasFocus:g,$linkSize:f,$bold:p})=>{const h=b?"dark":"light",{color:m,hoverColor:k,focusColor:y,focusBgColor:x,focusBoxShadowColor:C}=n[h](d);return o.css([""," "," "," > a,> button{"," > ","{display:",";position:relative;vertical-align:middle;}&:focus{outline:none;}}"," > button,",":not(.legacy-search-button){background-color:transparent;border:none;padding:0;}"],e&&o.css(["a{position:absolute;box-sizing:border-box;display:inline-flex;min-height:var(--global-size-m);padding:var(--global-space-comp-m) var(--global-space-comp-xl);flex-direction:column;justify-content:center;align-items:flex-start;left:-999em;z-index:",";border:var(--global-borderwidth-s) solid var(--focus-borderalt);box-shadow:var(--global-depth-lvl1);border-radius:0 var(--global-radius-action-m) var(--global-radius-action-m) 0;background-color:var(--focus-bg);font:var(--global-font-static-comp-regular-m);color:var(--link-subtle-label-default);text-decoration:underline;outline:none;&:focus{top:var(--global-space-comp-s);left:0;}}"],t.zIndex.aboveAll),!e&&!v&&o.css(["> a,> button{"," text-decoration:",";"," ","}"],((e,l)=>{let r;return r="large"===e?l?"--global-font-static-comp-lined-medium-l":"--global-font-static-comp-regular-l":l?"--global-font-static-comp-lined-medium-m":"--global-font-static-comp-regular-m",o.css(["font:var(",");"],r)})(f,p),s&&"always"===u?"underline":"none",!c&&o.css(["color:",";","{width:20px;height:20px;color:",";::before{font-size:18px;line-height:18px;}"," ","}&:hover{color:",";text-decoration:",";> ","{color:",";}}&:not(:has(img,svg,picture)):focus{color:",";text-decoration:none;","{color:",";}}&:has(img,svg,picture){display:inline-block;vertical-align:middle;}&:has(img,svg,picture):focus{"," border-radius:var(--global-radius-action-xs);outline:default;}"],m,r.default,m,"left"===i&&o.css(["margin-right:",";"],s?"var(--global-space-comp-s)":0),"right"===i&&o.css(["margin-right:0;margin-left:",";"],s?"var(--global-space-comp-s)":0),k,!s||"hover"!==u&&"always"!==u?"none":"underline",r.default,k,y,r.default,y,l.default()),c&&o.css(["color:var(--colorsActionMajorYin030);&:hover,&:focus{cursor:not-allowed;color:var(--colorsActionMajorYin030);}"])),!c&&o.css(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),v&&"display: inline-block;",r.default,s?"inline-block":"inline",!e&&!v&&!c&&g&&o.css(["max-width:fit-content;&:not(:has(img,svg,picture)){border-radius:var(--global-radius-action-xs);background-color:",";box-shadow:0 var(--global-size-5-xs) 0 0 ",';}&:has([data-popover-container-button="true"]){border-bottom-left-radius:0;border-bottom-right-radius:0;}'],x,C),a.default)})),c=i.default.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-2960b2ab-1"})([""]);exports.StyledContent=c,exports.StyledLink=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),t=require("../../../style/themes/apply-base-theme.js"),i=require("../../icon-button/icon-button.style.js"),l=require("../../box/box.style.js"),r=require("../../search/search.style.js"),s=require("../../icon/icon.style.js"),o=require("../../button/button.style.js"),n=require("../menu.config.js"),a=require("../../../style/utils/add-focus-styling.js"),
|
|
1
|
+
"use strict";var e=require("styled-components"),t=require("../../../style/themes/apply-base-theme.js"),i=require("../../icon-button/icon-button.style.js"),l=require("../../box/box.style.js"),r=require("../../search/__internal__/legacy/search.style.js"),s=require("../../icon/icon.style.js"),o=require("../../button/button.style.js"),n=require("../menu.config.js"),a=require("../../../style/utils/add-focus-styling.js"),d=require("../../link/link.style.js");function u(e){return e&&e.__esModule?e:{default:e}}var c=u(e);const b=c.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreen",componentId:"sc-f9ae5d65-0"})(["position:fixed;top:0;bottom:0;"," ",""],(({theme:t})=>e.css(["z-index:",";"],t.zIndex.fullScreenModal)),(({startPosition:t,transitionDuration:i})=>e.css(["&.enter{visibility:hidden;",":-100%;}&.enter-active{visibility:visible;",":0;transition:all ","ms ease;}&.exit{visibility:visible;",":0;}&.exit-active{visibility:hidden;",":-100%;transition:all ","ms ease;}"],t,t,i,t,t,i))),f=c.default.div.attrs(t.default).withConfig({displayName:"menu-full-screen.style__StyledMenuModal",componentId:"sc-f9ae5d65-1"})(["height:100vh;width:100vw;outline:none;&&{","{max-width:100vw;}"," > a,"," > button,> div{font-size:var(--fontSizes200);}}",""],d.StyledLink,d.StyledLink,d.StyledLink,(({menuType:t})=>e.css(["background-color:",";&&&{","{","{display:inline-flex;bottom:auto;}","{display:flex;line-height:normal;padding-bottom:0;&:focus{border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);","}}}}","{scrollbar-color:",";&::-webkit-scrollbar{width:var(--sizing150);}&::-webkit-scrollbar-thumb{background-color:",";}&::-webkit-scrollbar-track{background-color:",";}}"],n.default[t].background,r.default,s.default,o.default,a.default(),l.default,n.default[t].scrollbarColor,n.default[t].scrollbarThumb,n.default[t].scrollbarTrack))),y=c.default.div.withConfig({displayName:"menu-full-screen.style__StyledMenuFullscreenHeader",componentId:"sc-f9ae5d65-2"})(["height:40px;","{position:absolute;z-index:1;right:16px;top:8px;}",""],i.default,(({menuType:t})=>e.css(["background-color:",";"],n.default[t].submenuItemBackground)));exports.StyledMenuFullscreen=b,exports.StyledMenuFullscreenHeader=y,exports.StyledMenuModal=f;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),n=require("styled-system"),t=require("../menu.config.js"),e=require("../../link/link.component.js"),a=require("../../button/button.style.js"),r=require("../../icon-button/icon-button.style.js"),c=require("../../icon/icon.style.js"),i=require("../../link/link.style.js"),s=require("../../../style/themes/apply-base-theme.js"),u=require("../../../style/utils/add-focus-styling.js");function d(o){return o&&o.__esModule?o:{default:o}}const l=o=>{var n,t;const{paddingRight:e}=o,a=null===(t=String(e))||void 0===t||null===(n=t.match(/\d+/))||void 0===n?void 0:n[0];if("var(--spacing000)"===e||"0"===a)return{padding:"var(--spacing200)",iconSpacing:"2px"};switch(e){case"var(--spacing100)":return{padding:"var(--spacing300)",iconSpacing:e};case"var(--spacing200)":return{padding:"var(--spacing400)",iconSpacing:e};case"var(--spacing300)":return{padding:"var(--spacing500)",iconSpacing:e};case"var(--spacing400)":return{padding:"var(--spacing600)",iconSpacing:e};case"var(--spacing500)":return{padding:"var(--spacing700)",iconSpacing:e};case"var(--spacing600)":return{padding:"var(--spacing800)",iconSpacing:e};case"var(--spacing700)":return{padding:"var(--spacing900)",iconSpacing:e};case"var(--spacing800)":return{padding:"var(--spacing1000)",iconSpacing:e};default:return a?{padding:`${16+Number(a)}px`,iconSpacing:`${a}px`}:{padding:"var(--spacing400)",iconSpacing:"var(--spacing200)"}}},p=d(o).default.a.attrs(s.default).attrs({as:e.Link}).withConfig({displayName:"menu-item.style__StyledMenuItemWrapper",componentId:"sc-2ff3820d-0"})([""," &&&{> a,> button{","}}"],(({menuType:e,selected:s,hasSubmenu:d,isOpen:p,menuItemVariant:g,showDropdownArrow:b,href:h,clickToOpen:f,maxWidth:m,inFullscreenView:v,overrideColor:x,asPassiveItem:k,asDiv:y,hasFocusableChild:S,hasInput:w,inSubmenu:C})=>o.css(["display:flex;align-items:center;min-height:40px;position:relative;box-shadow:none;a,button{min-height:40px;height:100%;box-sizing:border-box;font-size:14px;font-weight:500;&:not(.legacy-search-button) > ","{margin-right:var(--spacing050);}}&& a:focus,&& button:focus{",'}:has([data-element="input"]) ',"{width:100%;}"," "," "," "," "," button,"," button,a,"," a{margin:0px;text-align:left;",'}&&&{a,button,[data-component="icon"],'," a,"," button,",' [data-component="icon"]{font-weight:500;text-decoration:none;',"}","}"," "," "," "," ",""],c.default,u.default(!0),i.StyledContent,!x&&o.css(["background-color:",';&:has([data-popover-container-button="true"]){background-color:var(--colorsActionMajor500);}'],t.default[e].background),x&&o.css(["&&&&{background-color:",";}"],"alternate"===g?t.default[e].alternate:t.default[e].submenuItemBackground),!v&&o.css(["max-width:inherit;width:inherit;height:inherit;> a,> button{display:flex;align-items:center;"," width:inherit;max-width:inherit;}&&{a:focus,button:focus{background-color:",";color:",';z-index:1;position:relative;}}&:has([data-popover-container-button="true"]){&&{a:focus,button:focus{background-color:var(--colorsActionMajor500);}}}&&&{a,button{',"}a:hover,button:hover{","{border-radius:0;background-color:transparent;}"," ::before{border-top-color:var(--colorsComponentsMenuYang100);}}}"],C?"":"justify-content: center;",t.default[e].background,t.default[e].color,m&&o.css(["box-sizing:border-box;max-width:inherit;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:bottom;display:block;"]),a.default,!y&&!k&&o.css(['background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}'])),S&&o.css(["&& "," ",'{> span{display:inline-flex;margin-right:0;}:focus{outline:none;[data-component="icon"]{color:',";}}}"],!v&&o.css(["&& > a:not(:has(button)){padding:11px 16px;}> a:has(",":not(.legacy-search-button)){height:100%;","{height:inherit;div{height:inherit;}}","{min-height:40px;padding:10px 0px;box-sizing:border-box;height:100%;}}"],a.default,i.StyledContent,a.default),r.default,t.default[e].color),!S&&!v&&o.css(["",""],d||m?o.css(["& > a,& > button{padding:11px 16px ",";}"],d&&m?"12px":"10px"):o.css(["& > a,& > button{padding:11px 16px;}"])),i.StyledLink,i.StyledLink,v&&o.css(["height:auto;white-space:normal;","{top:-2px;}"],c.default),i.StyledLink,i.StyledLink,i.StyledLink,!w&&`color: ${t.default[e].color};`,!v&&o.css(["a > ",",button > ","{display:inline-block;height:18px;top:-2px;}"],c.default,c.default),s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);}"],t.default[e].selected,t.default[e].selected),"alternate"===g&&!v&&o.css(["&&&{background-color:",";}&&& a:focus,&&& button:focus{background-color:",";}",""],t.default[e].alternate,t.default[e].alternate,!w&&o.css(["&&& a:hover,&&& button:hover{background-color:",";}"],t.default[e].alternateHover)),p&&o.css(["a,button{background-color:",";color:",";}"],t.default[e].submenuItemBackground,t.default[e].color),d&&o.css(["background-color:",";a:focus,button:focus{background-color:",";color:",';[data-component="icon"]{color:',";}","}a:hover,button:hover{background-color:",";color:var(--colorsComponentsMenuYang100);",' [data-component="icon"]{color:',";}}"," ",""],t.default[e].submenuBackground,t.default[e].submenuBackground,t.default[e].color,t.default[e].color,f&&p&&o.css(["background-color:",";"],t.default[e].submenuOpenedBackground),t.default[e].submenuOpenedBackground,!(h||f)&&o.css(["cursor:default;background-color:",";color:",";"],t.default[e].submenuItemBackground,t.default[e].color),t.default[e].color,s&&o.css(["background-color:",";a:focus,button:focus{background-color:",";}a:hover,button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);}"],t.default[e].submenuSelected,t.default[e].submenuSelected),b&&o.css(["&&&{> a,> button:not(","){padding-right:",";}}a::before,button::before{display:block;margin-top:-1px;pointer-events:none;position:absolute;right:",';top:50%;z-index:2;content:"";width:0;height:0;border-width:5px 4px 4px;border-style:solid;border-top-color:initial;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}'],r.default,(o=>l(n.padding(o)).padding),(o=>l(n.padding(o)).iconSpacing))),v&&o.css([""," > a,> button{min-height:40px;line-height:40px;padding:0px 16px;width:100vw;box-sizing:border-box;}a:focus,button:focus{z-index:1;position:relative;}","}"],y&&o.css(["&&&{> a,> button{color:",";outline:none;}> button:hover,> a:hover{background-color:transparent;cursor:default;outline:none;color:",";}}"],t.default[e].title,t.default[e].title),!k&&o.css(["&&{> a:focus,> a:hover,> button:focus,> button:hover{background-color:var(--colorsComponentsMenuAutumnStandard600);color:var(--colorsComponentsMenuYang100);","}}"],!w&&o.css(['[data-component="icon"]{color:var(--colorsComponentsMenuYang100);}']))))),n.padding);exports.default=p;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),r=require("../../../button/button.style.js"),t=require("../../../icon/icon.style.js"),e=require("../../../../style/themes/apply-base-theme.js");function a(o){return o&&o.__esModule?o:{default:o}}var n=a(o);const d=n.default.div.withConfig({displayName:"search-button.style__StyledButtonIcon",componentId:"sc-232ba56c-0"})(["&&& ","{color:var(--colorsActionMajorYang100);margin-right:0px;}"],t.default),s=n.default.div.attrs(e.default).withConfig({displayName:"search-button.style__StyledSearchButton",componentId:"sc-232ba56c-1"})(["display:flex;align-self:end;border-bottom:none;min-width:fit-content;&&& ","{color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorTransparent);border-bottom-left-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);:hover{border-color:var(--colorsActionMajorTransparent);}width:fit-content;","","{color:var(--colorsActionMajorYang100);}margin:0px 0px;padding-bottom:3px;:focus{z-index:1;}}"],r.default,t.default,t.default);exports.StyledButtonIcon=d,exports.default=s;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { TagProps } from "../../../../__internal__/utils/helpers/tags";
|
|
4
|
+
import { CommonTextboxProps } from "../../../textbox";
|
|
5
|
+
import { ValidationProps } from "../../../../__internal__/validations";
|
|
6
|
+
export interface SearchEvent {
|
|
7
|
+
target: {
|
|
8
|
+
name?: string;
|
|
9
|
+
id?: string;
|
|
10
|
+
value: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export interface SearchProps extends ValidationProps, MarginProps, TagProps, Pick<CommonTextboxProps, "label" | "inputHint"> {
|
|
14
|
+
/** Prop to specify the aria-label of the search component */
|
|
15
|
+
"aria-label"?: string;
|
|
16
|
+
/** Prop to specify the aria-label of the search button */
|
|
17
|
+
searchButtonAriaLabel?: string;
|
|
18
|
+
/** Prop for `id` */
|
|
19
|
+
id?: string;
|
|
20
|
+
/** Prop for `name` */
|
|
21
|
+
name?: string;
|
|
22
|
+
/** Prop for `onBlur` events */
|
|
23
|
+
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
24
|
+
/** Prop for `onChange` events */
|
|
25
|
+
onChange: (ev: SearchEvent) => void;
|
|
26
|
+
/** Prop for `onClick` events.
|
|
27
|
+
* `onClick` events are triggered when the `searchButton` is clicked
|
|
28
|
+
*/
|
|
29
|
+
onClick?: (ev: SearchEvent) => void;
|
|
30
|
+
/**
|
|
31
|
+
* Sets whether the onClick action should be triggered when the Search cross icon is clicked.
|
|
32
|
+
*/
|
|
33
|
+
triggerOnClear?: boolean;
|
|
34
|
+
/** Prop for `onFocus` events */
|
|
35
|
+
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
36
|
+
/** Prop for `onKeyDown` events */
|
|
37
|
+
onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
38
|
+
/** Prop for a placeholder */
|
|
39
|
+
placeholder?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Pass a boolean to render a search Button with default text.
|
|
42
|
+
* Pass a string to override the text in the search Button
|
|
43
|
+
* */
|
|
44
|
+
searchButton?: boolean | string;
|
|
45
|
+
/** Data tag prop bag for searchButton */
|
|
46
|
+
searchButtonDataProps?: TagProps;
|
|
47
|
+
/**
|
|
48
|
+
* Prop for specifying an input width length.
|
|
49
|
+
* Leaving the `searchWidth` prop with no value will default the width to '100%'
|
|
50
|
+
*/
|
|
51
|
+
searchWidth?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Prop for specifying the max-width of the input.
|
|
54
|
+
* Leaving the `maxWidth` prop with no value will default the width to '100%'
|
|
55
|
+
*/
|
|
56
|
+
maxWidth?: string;
|
|
57
|
+
/** Current value */
|
|
58
|
+
value: string;
|
|
59
|
+
/** Prop to specify the styling of the search component */
|
|
60
|
+
variant?: "default" | "dark";
|
|
61
|
+
/** Input tabindex */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** [Legacy] Overrides the default tooltip position */
|
|
64
|
+
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
65
|
+
}
|
|
66
|
+
export type SearchHandle = {
|
|
67
|
+
/** Programmatically focus on root container of Dialog. */
|
|
68
|
+
focus: () => void;
|
|
69
|
+
} | null;
|
|
70
|
+
export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
|
|
71
|
+
export default Search;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"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"),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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"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:"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;
|
|
@@ -10,34 +10,23 @@ export interface SearchEvent {
|
|
|
10
10
|
value: string;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
export
|
|
14
|
-
|
|
13
|
+
export type SearchTextboxProps = Pick<CommonTextboxProps, "tooltipPosition" | "name" | "id" | "onFocus" | "onKeyDown" | "onBlur" | "label" | "inputHint" | "size" | "inputWidth" | "className" | "labelInline" | "required">;
|
|
14
|
+
export interface SearchProps extends ValidationProps, MarginProps, TagProps, SearchTextboxProps {
|
|
15
|
+
/** Prop to specify the accessible name of the Search input. To be used when no visible label is provided */
|
|
15
16
|
"aria-label"?: string;
|
|
16
|
-
/** Prop to specify the
|
|
17
|
+
/** Prop to specify the accessible name of the Search button */
|
|
17
18
|
searchButtonAriaLabel?: string;
|
|
18
|
-
/** Prop for `
|
|
19
|
-
id?: string;
|
|
20
|
-
/** Prop for `name` */
|
|
21
|
-
name?: string;
|
|
22
|
-
/** Prop for `onBlur` events */
|
|
23
|
-
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
24
|
-
/** Prop for `onChange` events */
|
|
19
|
+
/** Prop for `onChange` events on the Search input */
|
|
25
20
|
onChange: (ev: SearchEvent) => void;
|
|
26
|
-
/** Prop for `onClick` events.
|
|
27
|
-
* `onClick` events are triggered when the
|
|
21
|
+
/** Prop for `onClick` events on the Search button.
|
|
22
|
+
* `onClick` events are triggered when the Search button is clicked
|
|
23
|
+
* or when the Search input's cross icon is clicked if the `triggerOnClear` prop is set to `true`.
|
|
28
24
|
*/
|
|
29
25
|
onClick?: (ev: SearchEvent) => void;
|
|
30
|
-
/**
|
|
31
|
-
* Sets whether the onClick action should be triggered when the Search cross icon is clicked.
|
|
32
|
-
*/
|
|
26
|
+
/** Sets whether the `onClick` action should be triggered when the Search cross icon is clicked. */
|
|
33
27
|
triggerOnClear?: boolean;
|
|
34
|
-
/** Prop for `onFocus` events */
|
|
35
|
-
onFocus?: (ev: React.FocusEvent<HTMLInputElement>) => void;
|
|
36
|
-
/** Prop for `onKeyDown` events */
|
|
37
|
-
onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
38
|
-
/** Prop for a placeholder */
|
|
39
|
-
placeholder?: string;
|
|
40
28
|
/**
|
|
29
|
+
* @deprecated This prop no longer has any effect. This prop will eventually be removed.
|
|
41
30
|
* Pass a boolean to render a search Button with default text.
|
|
42
31
|
* Pass a string to override the text in the search Button
|
|
43
32
|
* */
|
|
@@ -45,27 +34,34 @@ export interface SearchProps extends ValidationProps, MarginProps, TagProps, Pic
|
|
|
45
34
|
/** Data tag prop bag for searchButton */
|
|
46
35
|
searchButtonDataProps?: TagProps;
|
|
47
36
|
/**
|
|
48
|
-
*
|
|
37
|
+
* @deprecated This prop no longer has any effect. This prop will eventually be removed. Use `inputWidth` instead.
|
|
38
|
+
* Prop for specifying the width of the Search container. This value is mapped to `inputWidth`.
|
|
49
39
|
* Leaving the `searchWidth` prop with no value will default the width to '100%'
|
|
50
40
|
*/
|
|
51
41
|
searchWidth?: string;
|
|
52
42
|
/**
|
|
53
|
-
* Prop for specifying the max-width of the input.
|
|
43
|
+
* Prop for specifying the max-width of the Search input.
|
|
54
44
|
* Leaving the `maxWidth` prop with no value will default the width to '100%'
|
|
55
45
|
*/
|
|
56
46
|
maxWidth?: string;
|
|
47
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. */
|
|
48
|
+
placeholder?: CommonTextboxProps["placeholder"];
|
|
57
49
|
/** Current value */
|
|
58
50
|
value: string;
|
|
59
|
-
/**
|
|
51
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. `variant="dark"` is mapped to `inverse={true}` to preserve legacy behavior. */
|
|
60
52
|
variant?: "default" | "dark";
|
|
61
|
-
/** Input tabindex */
|
|
53
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. Input tabindex */
|
|
62
54
|
tabIndex?: number;
|
|
63
|
-
/**
|
|
64
|
-
|
|
55
|
+
/** When set to `true`, inverts the Search input and button styling for use on darker backgrounds. */
|
|
56
|
+
inverse?: boolean;
|
|
57
|
+
/** @deprecated This prop no longer has any effect. This prop will eventually be removed. */
|
|
58
|
+
warning?: CommonTextboxProps["warning"];
|
|
65
59
|
}
|
|
66
60
|
export type SearchHandle = {
|
|
67
|
-
/** Programmatically focus
|
|
61
|
+
/** Programmatically focus the search input. */
|
|
68
62
|
focus: () => void;
|
|
63
|
+
/** Programmatically focus the search button. */
|
|
64
|
+
focusButton: () => void;
|
|
69
65
|
} | null;
|
|
70
66
|
export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<SearchHandle>>;
|
|
71
67
|
export default Search;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("invariant"),n=require("../../__internal__/utils/helpers/tags/tags.js"),a=require("../button/__next__/button.component.js"),o=require("../../hooks/__internal__/useLocale/useLocale.js"),i=require("../divider/divider.component.js"),u=require("../textbox/__internal__/__next__/text-input.component.js"),l=require("../menu/__internal__/menu.context.js"),s=require("./__internal__/legacy/search.component.js");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(r),p=c(t);function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function h(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}function b(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const v=d.default.forwardRef(((t,c)=>{var{onChange:d,onClick:f,triggerOnClear:v,value:m,id:g,name:y,label:O,placeholder:j,searchButtonDataProps:_,searchButtonAriaLabel:x,"aria-label":P,variant:w,inverse:B,error:k,size:C,inputWidth:q,searchButton:E,searchWidth:L,maxWidth:W,tabIndex:D,tooltipPosition:N,warning:S,className:I}=t,T=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(t,["onChange","onClick","triggerOnClear","value","id","name","label","placeholder","searchButtonDataProps","searchButtonAriaLabel","aria-label","variant","inverse","error","size","inputWidth","searchButton","searchWidth","maxWidth","tabIndex","tooltipPosition","warning","className"]);const z=o.default(),A=r.useRef(null),M=r.useRef(null),R=r.useRef(null),{inMenu:$}=r.useContext(l.default);r.useImperativeHandle(c,(()=>({focus(){var e,r;$?null===(r=R.current)||void 0===r||r.focus():null===(e=A.current)||void 0===e||e.focus()},focusButton(){var e;null===(e=M.current)||void 0===e||e.focusButton()}})),[$]),p.default("string"==typeof m,"This component has no initial value");const F=z.search.searchButtonText();r.useEffect((()=>{if(!v||!f)return;const e=A.current;if(!e)return;const r={current:!1},t=e=>{r.current="Enter"===e.key},n=e=>{const t=e.target;t.value||r.current||f({target:b(h({},y&&{name:y},g&&{id:g}),{value:t.value})}),r.current=!1};return e.addEventListener("keydown",t),e.addEventListener("search",n),()=>{e.removeEventListener("keydown",t),e.removeEventListener("search",n)}}),[v,f,y,g]);const H=null!=q?q:(e=>{if(!e)return;const r=Number.parseFloat(e);return Number.isNaN(r)?void 0:r})(L),G={searchButton:E,searchWidth:L,tabIndex:D,tooltipPosition:N,warning:S},J=r.useMemo((()=>["search",B||"dark"===w?"inverse":void 0,k?"error":void 0,I].filter(Boolean).join(" ")),[B,w,I,k]);return $?e.jsx(s.Search,b(h({},T,G),{onChange:d,value:m,id:g,error:k,placeholder:j,name:y,label:O,variant:w,"aria-label":P,searchButtonAriaLabel:x,searchButtonDataProps:_,triggerOnClear:v,onClick:f,ref:R})):e.jsx(u.TextInput,b(h({},T,n.default("search",T)),{className:J,id:g,name:y,type:"search",label:O||"",onChange:d,value:m,size:C,inputWidth:H,maxWidth:W,error:k,"aria-label":P||(O?void 0:z.search.searchButtonText()),ref:A,inputIcon:e.jsxs(e.Fragment,{children:[e.jsx(i.Divider,{"aria-hidden":!0,"data-role":"search-divider",height:`calc(100% - var(--global-space-comp-${(null==C?void 0:C.charAt(0))||"m"}))`,p:0,type:"vertical"}),e.jsx(a.Button,h({ref:M,"aria-label":x||F,className:"search-button",iconType:"search",inverse:B,size:C,variant:"default",variantType:"subtle"},n.default(`${F}-button`,h({"data-element":`${F}-button`},_)),f&&{onClick:()=>f({target:{name:y,id:g,value:m}})}))]})}))}));exports.Search=v,exports.default=v;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../__internal__/input/input.component.js"),n=require("../../../../__internal__/validation-message/__next__/validation-message.component.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),a=require("../../../../style/utils/filter-out-styled-system-spacing-props.js"),l=require("../../../../hooks/__internal__/useUniqueId/index.js"),o=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js"),u=require("../../../../__internal__/error-border/error-border.style.js"),d=require("./text-input.style.js"),c=require("../../../../__internal__/hint-text/hint-text.component.js"),p=require("../../../../__internal__/label/label.component.js"),b=require("../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js"),f=require("../../../../__internal__/utils/helpers/combine-refs/index.js"),_=require("../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js"),y=require("../../../fieldset/__internal__/fieldset.context.js");function j(e){return e&&e.__esModule?e:{default:e}}function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../__internal__/input/input.component.js"),n=require("../../../../__internal__/validation-message/__next__/validation-message.component.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var i=require("../../../../style/utils/filter-styled-system-margin-props.js"),a=require("../../../../style/utils/filter-out-styled-system-spacing-props.js"),l=require("../../../../hooks/__internal__/useUniqueId/index.js"),o=require("../../../../__internal__/utils/helpers/guid/index.js"),s=require("../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js"),u=require("../../../../__internal__/error-border/error-border.style.js"),d=require("./text-input.style.js"),c=require("../../../../__internal__/hint-text/hint-text.component.js"),p=require("../../../../__internal__/label/label.component.js"),b=require("../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js"),f=require("../../../../__internal__/utils/helpers/combine-refs/index.js"),_=require("../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js"),y=require("../../../fieldset/__internal__/fieldset.context.js");function j(e){return e&&e.__esModule?e:{default:e}}function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function h(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){m(e,r,t[r])}))}return e}function x(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const g=j(r).default.forwardRef(((j,m)=>{var{autoFocus:g,"aria-describedby":O,"aria-labelledby":v,children:q,className:w,"data-component":I="text-input","data-element":P,"data-is-open":C,"data-role":k,disabled:$,error:z,id:T,inputHint:W,inputIcon:D,inputWidth:M,label:R,labelInline:S=!1,leftChildren:E,maxWidth:F,name:N,onChange:B,onClick:H,onMouseDown:V,placeholder:A,prefix:L,readOnly:U,required:G,size:J="medium",type:K="text",validationMessagePositionTop:Q,value:X,warning:Y}=j,Z=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(j,["autoFocus","aria-describedby","aria-labelledby","children","className","data-component","data-element","data-is-open","data-role","disabled","error","id","inputHint","inputIcon","inputWidth","label","labelInline","leftChildren","maxWidth","name","onChange","onClick","onMouseDown","placeholder","prefix","readOnly","required","size","type","validationMessagePositionTop","value","warning"]);const ee=r.useRef(null),re=f.default(m,ee),{disableErrorBorder:te}=r.useContext(_.default),ne={disabled:$,readOnly:U},[ie,ae]=l.default(T,N),{labelId:le,validationId:oe,ariaDescribedBy:se}=s.default({id:ie,validationRedesignOptIn:!0,error:z,warning:Y,label:R}),ue=r.useRef(o.default()),de=W?ue.current:void 0,ce=L?`${ie}-prefix`:void 0,{size:pe,hasError:be,required:fe}=r.useContext(y.default),_e=pe||J,ye=!!z||!!be,je=null!=M?M:S?80:100,me=[de,ce,se,O].filter(Boolean).join(" "),he=!(!z&&!Y);b.default(!!z,!!Y,ie);const xe=he&&!te&&e.jsx(n.default,{id:oe,size:_e,error:z,warning:Y}),ge=he&&!te&&e.jsx(u.default,{"data-role":"error-border",$warning:!(z||!Y)}),Oe=r.useCallback((e=>{$||U||null==V||V(e)}),[V,$,U]),ve=r.useCallback((e=>{$||U||null==H||H(e)}),[H,$,U]),qe=r.useCallback((e=>{var r;$||U||document.activeElement===ee.current||!e.currentTarget.contains(e.target)||null===(r=ee.current)||void 0===r||r.focus()}),[$,U]);return e.jsxs(d.StyledTextInput,x(h({className:w,"data-element":P,"data-role":k,"data-component":I,$size:_e,$labelInline:S,$hasValidationFailure:S&&he},i.default(Z)),{children:[R&&e.jsxs(d.LabelWrapper,{"data-role":"label-wrapper",$labelInline:S,$size:_e,$labelWrapperWidth:S&&"number"==typeof je?100-je:void 0,children:[e.jsx(p.default,x(h({id:le,htmlFor:ie,size:_e,isRequired:G},ne),{children:R})),W&&e.jsx(c.HintText,x(h({id:de,size:_e},ne),{children:W}))]}),e.jsxs(d.InputWrapper,{"data-role":"input-wrapper",$size:_e,$maxWidth:F,$inputWidth:M,onClick:qe,"data-is-open":C,children:[Q&&xe,e.jsx(t.default,x(h({id:ie,name:ae,className:w,"aria-invalid":ye,"aria-describedby":me,"aria-labelledby":v,value:X,placeholder:$||U?void 0:A,required:G||fe,ref:re,autoFocus:g,onMouseDown:Oe,onClick:ve,onChange:B,error:ye,inputIcon:D,size:_e,prefix:L,prefixId:ce,leftChildren:E,type:K,"data-is-open":C},ne,a.default(Z)),{children:q})),!Q&&xe,ge]})]}))}));exports.TextInput=g,exports.default=g;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../../style/themes/apply-base-theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const n=s.default.div.attrs(t.default).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"sc-
|
|
1
|
+
"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../../style/themes/apply-base-theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const n=s.default.div.attrs(t.default).withConfig({displayName:"text-input.style__StyledTextInput",componentId:"sc-3d83f5ed-0"})(['[data-component="inline-inputs"] &,&[data-element="current-page"]{--fieldSpacing:0px;}margin-bottom:var(--fieldSpacing);'," display:flex;align-items:flex-start;flex-direction:",";gap:",";.fieldset-content &{gap:var(--global-space-comp-xs);}.time &{gap:unset;}.legacy-search &{flex:1 1 0%;}"],a.margin,(({$labelInline:e})=>e?"row":"column"),(({$labelInline:e,$size:a,$hasValidationFailure:t})=>{if(!e)switch(a){case"small":return"var(--global-space-comp-xs)";case"large":return"var(--global-space-comp-m)";default:return"var(--global-space-comp-s)"}return"large"===a?t?"var(--global-space-comp-l)":"var(--global-space-comp-m)":t?"var(--global-space-comp-l)":"var(--global-space-comp-s)"})),i=s.default.div.withConfig({displayName:"text-input.style__LabelWrapper",componentId:"sc-3d83f5ed-1"})([""," display:flex;flex-direction:column;align-self:stretch;",""],(({$labelWrapperWidth:e})=>e&&`\n --label-spacing: ${e}%;\n\n [data-component="date-range"] & {\n --label-spacing: ${2*e}%;\n }\n `),(({$labelInline:a,$size:t})=>e.css([""," ",""],a&&e.css(["padding-top:var(--global-space-comp-",");justify-content:flex-start;align-items:flex-end;align-self:stretch;width:var(--label-spacing,auto);"],t.charAt(0)),!a&&e.css(["justify-content:flex-end;align-items:flex-start;"])))),p=s.default.div.withConfig({displayName:"text-input.style__InputWrapper",componentId:"sc-3d83f5ed-2"})(["display:flex;flex-direction:column;position:relative;width:100%;min-width:0;gap:",";",""],(({$size:e})=>"small"===e?"var(--global-space-comp-xs)":"var(--global-space-comp-s)"),(({$maxWidth:a,$inputWidth:t})=>e.css([""," width:",";"],a&&`max-width: ${a};`,t?`${t}%`:"100%")));exports.InputWrapper=p,exports.LabelWrapper=i,exports.StyledTextInput=n;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "carbon-react",
|
|
3
|
-
"version": "159.
|
|
3
|
+
"version": "159.14.0",
|
|
4
4
|
"description": "A library of reusable React components for easily building user interfaces.",
|
|
5
5
|
"files": [
|
|
6
6
|
"lib",
|
|
@@ -88,7 +88,6 @@
|
|
|
88
88
|
"@storybook/builder-vite": "~10.4.2",
|
|
89
89
|
"@storybook/icons": "1.4.0",
|
|
90
90
|
"@storybook/react-vite": "~10.4.2",
|
|
91
|
-
"@storybook/test-runner": "^0.24.4",
|
|
92
91
|
"@swc/core": "^1.11.29",
|
|
93
92
|
"@swc/helpers": "^0.5.15",
|
|
94
93
|
"@swc/plugin-styled-components": "^7.1.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import o from"styled-components";import r from"../button/button.style.js";import t from"../icon/icon.style.js";import a from"../../style/themes/apply-base-theme.js";const e=o.div.withConfig({displayName:"search-button.style__StyledButtonIcon",componentId:"sc-52030d5d-0"})(["&&& ","{color:var(--colorsActionMajorYang100);margin-right:0px;}"],t),n=o.div.attrs(a).withConfig({displayName:"search-button.style__StyledSearchButton",componentId:"sc-52030d5d-1"})(["display:flex;align-self:end;border-bottom:none;min-width:fit-content;&&& ","{color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorTransparent);border-bottom-left-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);:hover{border-color:var(--colorsActionMajorTransparent);}width:fit-content;","","{color:var(--colorsActionMajorYang100);}margin:0px 0px;padding-bottom:3px;:focus{z-index:1;}}"],r,t,t);export{e as StyledButtonIcon,n as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{margin as o}from"styled-system";import r,{css as t}from"styled-components";import e from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import a from"../icon/icon.style.js";import i from"../../style/themes/apply-base-theme.js";import n from"../../__internal__/form-field/form-field.style.js";const s=r.div.attrs(i).withConfig({displayName:"search.style__StyledSearch",componentId:"sc-8ea1bc73-0"})(["",""],(({isFocused:r,searchWidth:i,maxWidth:s,searchHasValue:l,showSearchButton:c,variant:m})=>{const d="dark"===m;return t(["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;}","{","}"],o,i?`${i}`:"100%",s?`${s}`:"100%",!c&&t(["border-bottom:var(--spacing025) solid ",";:hover{border-bottom-color:",";cursor:pointer;}",""],d?"var(--colorsUtilityYang080)":"var(--colorsUtilityMajor300)",d?"var(--colorsUtilityYang100)":"var(--colorsUtilityMajor400)",(l||r)&&t(["border-bottom-color:transparent;:hover{border-bottom-color:transparent;cursor:default;}"])),n,a,d&&!c&&t(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!d&&t(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),e,l&&t(["margin-bottom:-1px;"]))}));export{s as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("styled-components"),r=require("../button/button.style.js"),t=require("../icon/icon.style.js"),e=require("../../style/themes/apply-base-theme.js");function a(o){return o&&o.__esModule?o:{default:o}}var d=a(o);const n=d.default.div.withConfig({displayName:"search-button.style__StyledButtonIcon",componentId:"sc-52030d5d-0"})(["&&& ","{color:var(--colorsActionMajorYang100);margin-right:0px;}"],t.default),s=d.default.div.attrs(e.default).withConfig({displayName:"search-button.style__StyledSearchButton",componentId:"sc-52030d5d-1"})(["display:flex;align-self:end;border-bottom:none;min-width:fit-content;&&& ","{color:var(--colorsActionMajorYang100);border-color:var(--colorsActionMajorTransparent);border-bottom-left-radius:var(--borderRadius000);border-top-left-radius:var(--borderRadius000);border-bottom-right-radius:var(--borderRadius050);border-top-right-radius:var(--borderRadius050);:hover{border-color:var(--colorsActionMajorTransparent);}width:fit-content;","","{color:var(--colorsActionMajorYang100);}margin:0px 0px;padding-bottom:3px;:focus{z-index:1;}}"],r.default,t.default,t.default);exports.StyledButtonIcon=n,exports.default=s;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-system"),o=require("styled-components"),e=require("../../__internal__/input-icon-toggle/input-icon-toggle.style.js"),t=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:"sc-8ea1bc73-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,t.default,u&&!c&&o.css(["color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}"]),!u&&o.css(["color:var(--colorsActionMinor500);:hover{color:var(--colorsActionMinor600);}"]),e.default,n&&o.css(["margin-bottom:-1px;"]))}));exports.default=l;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|