@laerdal/life-react-components 2.3.1-dev.26 → 2.3.1-dev.28
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/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +1 -18
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/Label.cjs.map +1 -1
- package/dist/InputFields/Label.d.ts +1 -1
- package/dist/InputFields/Label.js.map +1 -1
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +0 -15
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/PasswordField.cjs.map +1 -1
- package/dist/InputFields/PasswordField.d.ts +1 -15
- package/dist/InputFields/PasswordField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.d.ts +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +3 -16
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/SearchBar.cjs.map +1 -1
- package/dist/InputFields/SearchBar.d.ts +2 -2
- package/dist/InputFields/SearchBar.js.map +1 -1
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +1 -20
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.d.ts +8 -10
- package/dist/InputFields/index.js.map +1 -1
- package/dist/InputFields/types.cjs.map +1 -1
- package/dist/InputFields/types.d.ts +19 -0
- package/dist/InputFields/types.js.map +1 -1
- package/dist/Panel/Panel.cjs +1 -1
- package/dist/Panel/Panel.cjs.map +1 -1
- package/dist/Panel/Panel.js +1 -1
- package/dist/Panel/Panel.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n showDropdown?: boolean;\n dropdownButtonIcon?: React.ReactNode;\n dropdownButtonLabel?: string;\n dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n dropdownButtonAction?: () => boolean | void | undefined;\n searchList?: DropdownItem[];\n addToSearchList?: (e: DropdownItem) => void;\n dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n\n &.hidden {\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin,\n showDropdown,\n dropdownButtonIcon,\n dropdownButtonLabel,\n dropdownButtonVariant,\n dropdownButtonAction,\n searchList=[],\n addToSearchList,\n dropdownScrollable\n }) => {\n const containerRef = React.useRef<any>(null);\n\n const [isOpen, setIsOpen] = React.useState(false);\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n const enteredSearchTerm = (e: any) => {\n addToSearchList && addToSearchList({value:e.target.value});\n enterSearch(e);\n }\n\n const dropdownAction = () => {\n if(dropdownButtonAction)\n dropdownButtonAction(); \n }\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={'id'} size={size}\n ref={containerRef}\n searchTerm={searchTerm}\n disabled={disabled}\n validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n size={size}\n disabled={disabled}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enteredSearchTerm}\n focusParentRefs={[containerRef]}\n onClick={()=>setIsOpen(!isOpen)}\n ref={dropdownRef}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SystemIcons.Search size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <SystemIcons.Clear size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n\n {showDropdown && <DropdownContent id={'search'}\n containerRef={containerRef}\n size={size}\n isButton={false}\n ariaRolesType=\"input\"\n customizationProps={{\n items:searchList,\n action: dropdownAction,\n actionLabel: dropdownButtonLabel,\n actionIcon: dropdownButtonIcon,\n actionVariant: dropdownButtonVariant,\n onValueUpdate:(e)=>{},\n scrollable: dropdownScrollable,\n pinTopItem: true\n }}\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n filter={''}\n selectedValues={searchTerm ? [searchTerm] : []}\n setSelectedValues={(e)=>setSearchTerm(e[0])}\n messageOnNoResults={''}\n focused={null}\n setFocused={()=>{}}\n />}\n\n </InputWrapper>\n {validationMessage && (\n <ErrorMessage className={size || ''}>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n showDropdown?: boolean;\n dropdownButtonIcon?: React.ReactNode;\n dropdownButtonLabel?: string;\n dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n dropdownButtonAction?: () => boolean | void | undefined;\n searchList?: DropdownItem[];\n addToSearchList?: (e: DropdownItem) => void;\n dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n\n &.hidden {\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin,\n showDropdown,\n dropdownButtonIcon,\n dropdownButtonLabel,\n dropdownButtonVariant,\n dropdownButtonAction,\n searchList=[],\n addToSearchList,\n dropdownScrollable\n }) => {\n const containerRef = React.useRef<any>(null);\n\n const [isOpen, setIsOpen] = React.useState(false);\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n const enteredSearchTerm = (e: any) => {\n addToSearchList && addToSearchList({value:e.target.value});\n enterSearch(e);\n }\n\n const dropdownAction = () => {\n if(dropdownButtonAction)\n dropdownButtonAction(); \n }\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={'id'} size={size}\n ref={containerRef}\n searchTerm={searchTerm}\n disabled={disabled}\n validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n size={size}\n disabled={disabled}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enteredSearchTerm}\n focusParentRefs={[containerRef]}\n onClick={()=>setIsOpen(!isOpen)}\n ref={dropdownRef}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SystemIcons.Search size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <SystemIcons.Clear size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n\n {showDropdown && <DropdownContent id={'search'}\n containerRef={containerRef}\n size={size}\n isButton={false}\n ariaRolesType=\"input\"\n customizationProps={{\n items:searchList,\n action: dropdownAction,\n actionLabel: dropdownButtonLabel,\n actionIcon: dropdownButtonIcon,\n actionVariant: dropdownButtonVariant,\n onValueUpdate:(e)=>{},\n scrollable: dropdownScrollable,\n pinTopItem: true\n }}\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n filter={''}\n selectedValues={searchTerm ? [searchTerm] : []}\n setSelectedValues={(e)=>setSearchTerm(e[0])}\n messageOnNoResults={''}\n focused={null}\n setFocused={()=>{}}\n />}\n\n </InputWrapper>\n {validationMessage && (\n <ErrorMessage className={size || ''}>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Size } from '../types';
|
|
3
3
|
import { DropdownItem } from '../Dropdown';
|
|
4
|
-
|
|
4
|
+
type SeachBarProps = {
|
|
5
5
|
id: string;
|
|
6
6
|
searchTerm?: string;
|
|
7
7
|
setSearchTerm: (term: string) => void;
|
|
@@ -23,5 +23,5 @@ export type SearchBarProps = {
|
|
|
23
23
|
addToSearchList?: (e: DropdownItem) => void;
|
|
24
24
|
dropdownScrollable?: boolean;
|
|
25
25
|
};
|
|
26
|
-
declare const SearchBar: React.FunctionComponent<
|
|
26
|
+
declare const SearchBar: React.FunctionComponent<SeachBarProps>;
|
|
27
27
|
export default SearchBar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n showDropdown?: boolean;\n dropdownButtonIcon?: React.ReactNode;\n dropdownButtonLabel?: string;\n dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n dropdownButtonAction?: () => boolean | void | undefined;\n searchList?: DropdownItem[];\n addToSearchList?: (e: DropdownItem) => void;\n dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n\n &.hidden {\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin,\n showDropdown,\n dropdownButtonIcon,\n dropdownButtonLabel,\n dropdownButtonVariant,\n dropdownButtonAction,\n searchList=[],\n addToSearchList,\n dropdownScrollable\n }) => {\n const containerRef = React.useRef<any>(null);\n\n const [isOpen, setIsOpen] = React.useState(false);\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n const enteredSearchTerm = (e: any) => {\n addToSearchList && addToSearchList({value:e.target.value});\n enterSearch(e);\n }\n\n const dropdownAction = () => {\n if(dropdownButtonAction)\n dropdownButtonAction(); \n }\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={'id'} size={size}\n ref={containerRef}\n searchTerm={searchTerm}\n disabled={disabled}\n validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n size={size}\n disabled={disabled}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enteredSearchTerm}\n focusParentRefs={[containerRef]}\n onClick={()=>setIsOpen(!isOpen)}\n ref={dropdownRef}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SystemIcons.Search size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <SystemIcons.Clear size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n\n {showDropdown && <DropdownContent id={'search'}\n containerRef={containerRef}\n size={size}\n isButton={false}\n ariaRolesType=\"input\"\n customizationProps={{\n items:searchList,\n action: dropdownAction,\n actionLabel: dropdownButtonLabel,\n actionIcon: dropdownButtonIcon,\n actionVariant: dropdownButtonVariant,\n onValueUpdate:(e)=>{},\n scrollable: dropdownScrollable,\n pinTopItem: true\n }}\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n filter={''}\n selectedValues={searchTerm ? [searchTerm] : []}\n setSelectedValues={(e)=>setSearchTerm(e[0])}\n messageOnNoResults={''}\n focused={null}\n setFocused={()=>{}}\n />}\n\n </InputWrapper>\n {validationMessage && (\n <ErrorMessage className={size || ''}>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n id: string;\n searchTerm?: string;\n setSearchTerm: (term: string) => void;\n enterSearch: (e: any) => void;\n removeSearch: (e: any) => void;\n placeholder?: string;\n performSearchLabel?: string;\n disabled?: boolean;\n validationMessage?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n size?: Size.Small | Size.Medium;\n margin?: string;\n showDropdown?: boolean;\n dropdownButtonIcon?: React.ReactNode;\n dropdownButtonLabel?: string;\n dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n dropdownButtonAction?: () => boolean | void | undefined;\n searchList?: DropdownItem[];\n addToSearchList?: (e: DropdownItem) => void;\n dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n display: flex;\n align-items: center;\n\n &.hidden {\n display: none !important;\n }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n validationMessage,\n onKeyDown,\n size,\n margin,\n showDropdown,\n dropdownButtonIcon,\n dropdownButtonLabel,\n dropdownButtonVariant,\n dropdownButtonAction,\n searchList=[],\n addToSearchList,\n dropdownScrollable\n }) => {\n const containerRef = React.useRef<any>(null);\n\n const [isOpen, setIsOpen] = React.useState(false);\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n const enteredSearchTerm = (e: any) => {\n addToSearchList && addToSearchList({value:e.target.value});\n enterSearch(e);\n }\n\n const dropdownAction = () => {\n if(dropdownButtonAction)\n dropdownButtonAction(); \n }\n\n return (\n <>\n <InputWrapper\n disabled={disabled}\n margin={margin}>\n <SearchField id={'id'} size={size}\n ref={containerRef}\n searchTerm={searchTerm}\n disabled={disabled}\n validationMessage={validationMessage}>\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n size={size}\n disabled={disabled}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n onKeyDown={onKeyDown}\n enterSearch={enteredSearchTerm}\n focusParentRefs={[containerRef]}\n onClick={()=>setIsOpen(!isOpen)}\n ref={dropdownRef}\n />\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n <IconButton id={`${id}_Search`}\n variant=\"secondary\"\n shape=\"circular\"\n action={enterSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n <SystemIcons.Search size=\"24px\"/>\n </IconButton>\n </SearchIconWrapper>\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n <IconButton id={`${id}_Clear`}\n variant=\"secondary\"\n shape=\"circular\"\n action={removeSearch}\n disabled={disabled}\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n <SystemIcons.Clear size=\"24px\"/>\n </IconButton>\n </ClearIconWrapper>\n </SearchField>\n\n {showDropdown && <DropdownContent id={'search'}\n containerRef={containerRef}\n size={size}\n isButton={false}\n ariaRolesType=\"input\"\n customizationProps={{\n items:searchList,\n action: dropdownAction,\n actionLabel: dropdownButtonLabel,\n actionIcon: dropdownButtonIcon,\n actionVariant: dropdownButtonVariant,\n onValueUpdate:(e)=>{},\n scrollable: dropdownScrollable,\n pinTopItem: true\n }}\n isOpen={isOpen}\n setIsOpen={setIsOpen}\n filter={''}\n selectedValues={searchTerm ? [searchTerm] : []}\n setSelectedValues={(e)=>setSearchTerm(e[0])}\n messageOnNoResults={''}\n focused={null}\n setFocused={()=>{}}\n />}\n\n </InputWrapper>\n {validationMessage && (\n <ErrorMessage className={size || ''}>\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\
|
|
1
|
+
{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n & {\n id?: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n id,\n disabled,\n readOnly,\n onChange,\n value,\n validationMessage,\n type,\n autoComplete,\n placeholder,\n required,\n pattern,\n maxLength,\n withoutBorder,\n state,\n size,\n margin,\n note,\n className,\n dataTestId,\n ...rest\n }: TextFieldProps, ref) => {\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n return (\n <>\n <InputWrapper\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onClick={(e: any) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n }}>\n <InputFieldStyling\n id={id}\n data-testId={dataTestId}\n ref={elementRef}\n type={type || 'text'}\n value={value}\n className={cls}\n tabIndex={readOnly || disabled ? -1 : 0}\n autoComplete={autoComplete}\n placeholder={disabled ? undefined : placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n activeErrorMessage={!!validationMessage && state !== States.Valid}\n required={required}\n pattern={pattern}\n maxLength={maxLength}\n withoutBorder={withoutBorder}\n {...rest}\n />\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n {value}\n </TooltipOverflow>\n\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </InputWrapper>\n </>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Size, States, Testable } from '../types';
|
|
3
3
|
import { TextFieldNote } from './types';
|
|
4
|
-
export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
|
|
5
|
-
id?: string;
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
readOnly?: boolean;
|
|
8
|
-
onChange?: (text: string) => void;
|
|
9
|
-
value?: string;
|
|
10
|
-
validationMessage?: string;
|
|
11
|
-
type?: string;
|
|
12
|
-
state?: States.Invalid | States.Valid;
|
|
13
|
-
autoComplete?: string;
|
|
14
|
-
placeholder?: string;
|
|
15
|
-
required?: boolean;
|
|
16
|
-
pattern?: string;
|
|
17
|
-
maxLength?: number;
|
|
18
|
-
withoutBorder?: boolean;
|
|
19
|
-
size?: Size.Small | Size.Medium;
|
|
20
|
-
margin?: string;
|
|
21
|
-
note?: TextFieldNote;
|
|
22
|
-
};
|
|
23
4
|
declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
|
|
24
5
|
id?: string | undefined;
|
|
25
6
|
disabled?: boolean | undefined;
|
|
@@ -38,5 +19,5 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
|
|
|
38
19
|
size?: Size.Small | Size.Medium | undefined;
|
|
39
20
|
margin?: string | undefined;
|
|
40
21
|
note?: TextFieldNote | undefined;
|
|
41
|
-
} & React.RefAttributes<
|
|
22
|
+
} & React.RefAttributes<unknown>>;
|
|
42
23
|
export default TextField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n & {\n id?: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n id,\n disabled,\n readOnly,\n onChange,\n value,\n validationMessage,\n type,\n autoComplete,\n placeholder,\n required,\n pattern,\n maxLength,\n withoutBorder,\n state,\n size,\n margin,\n note,\n className,\n dataTestId,\n ...rest\n }: TextFieldProps, ref) => {\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n return (\n <>\n <InputWrapper\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onClick={(e: any) => {\n if (disabled || readOnly) {\n e.preventDefault();\n }\n }}>\n <InputFieldStyling\n id={id}\n data-testId={dataTestId}\n ref={elementRef}\n type={type || 'text'}\n value={value}\n className={cls}\n tabIndex={readOnly || disabled ? -1 : 0}\n autoComplete={autoComplete}\n placeholder={disabled ? undefined : placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n activeErrorMessage={!!validationMessage && state !== States.Valid}\n required={required}\n pattern={pattern}\n maxLength={maxLength}\n withoutBorder={withoutBorder}\n {...rest}\n />\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n {value}\n </TooltipOverflow>\n\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </InputWrapper>\n </>\n );\n});\n\nexport default TextField;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n TextField,\n PasswordField,\n Checkbox,\n RadioButton,\n SearchBar,\n InputLabel,\n DatepickerField,\n Textarea,\n QuickSearch,\n NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import TextField
|
|
2
|
-
import PasswordField
|
|
1
|
+
import TextField from './TextField';
|
|
2
|
+
import PasswordField from './PasswordField';
|
|
3
3
|
import Checkbox from './Checkbox';
|
|
4
|
-
import RadioButton
|
|
5
|
-
import SearchBar
|
|
6
|
-
import InputLabel
|
|
7
|
-
import DatepickerField
|
|
4
|
+
import RadioButton from './RadioButton';
|
|
5
|
+
import SearchBar from './SearchBar';
|
|
6
|
+
import InputLabel from './Label';
|
|
7
|
+
import DatepickerField from './DatepickerField';
|
|
8
8
|
import Textarea from './Textarea';
|
|
9
|
-
import QuickSearch
|
|
10
|
-
import NumberField
|
|
11
|
-
import { TextareaProps, CheckboxProps } from './types';
|
|
9
|
+
import QuickSearch from './QuickSearch';
|
|
10
|
+
import NumberField from './NumberField';
|
|
12
11
|
export * from './styling';
|
|
13
12
|
export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
|
|
14
|
-
export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField
|
|
1
|
+
{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n TextField,\n PasswordField,\n Checkbox,\n RadioButton,\n SearchBar,\n InputLabel,\n DatepickerField,\n Textarea,\n QuickSearch,\n NumberField\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,UAAU,MAAM,SAAS;AAChC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,WAAW,MAAM,eAAe;AAEvC,cAAc,WAAW;AAEzB,SACET,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,WAAW,EACXC,WAAW"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>\n & {\n id: string;\n state?: States.Invalid | States.Valid;\n onChange?: (text: string) => void;\n validationMessage?: string;\n size: Size.Small | Size.Medium;\n autoHeight?: boolean;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n message: string;\n icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n id?: string;\n selected: boolean;\n select?: (selected: boolean) => void;\n label?: string;\n invalid?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n readOnly?: boolean;\n tabIndexVal?: number;\n className?: string;\n};\n"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>\n & {\n id: string;\n state?: States.Invalid | States.Valid;\n onChange?: (text: string) => void;\n validationMessage?: string;\n size: Size.Small | Size.Medium;\n autoHeight?: boolean;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n message: string;\n icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n id?: string;\n selected: boolean;\n select?: (selected: boolean) => void;\n label?: string;\n invalid?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n readOnly?: boolean;\n tabIndexVal?: number;\n className?: string;\n};\n"],"mappings":";;;;;AAuDC"}
|
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
import { Size, States, Testable } from '../types';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
export type TextFieldProps = {
|
|
4
|
+
id: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
readOnly?: boolean;
|
|
7
|
+
onChange?: (text: string) => void;
|
|
8
|
+
value?: string;
|
|
9
|
+
validationMessage?: string;
|
|
10
|
+
type?: string;
|
|
11
|
+
state?: States.Invalid | States.Valid;
|
|
12
|
+
autoComplete?: string;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
pattern?: string;
|
|
16
|
+
maxLength?: number;
|
|
17
|
+
withoutBorder?: boolean;
|
|
18
|
+
size?: Size.Small | Size.Medium;
|
|
19
|
+
margin?: string;
|
|
20
|
+
note?: TextFieldNote;
|
|
21
|
+
};
|
|
3
22
|
export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
|
|
4
23
|
id: string;
|
|
5
24
|
state?: States.Invalid | States.Valid;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>\n & {\n id: string;\n state?: States.Invalid | States.Valid;\n onChange?: (text: string) => void;\n validationMessage?: string;\n size: Size.Small | Size.Medium;\n autoHeight?: boolean;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n message: string;\n icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n id?: string;\n selected: boolean;\n select?: (selected: boolean) => void;\n label?: string;\n invalid?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n readOnly?: boolean;\n tabIndexVal?: number;\n className?: string;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n id: string;\n disabled?: boolean;\n readOnly?: boolean;\n onChange?: (text: string) => void;\n value?: string;\n validationMessage?: string;\n type?: string;\n state?: States.Invalid | States.Valid;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n pattern?: string;\n maxLength?: number;\n withoutBorder?: boolean;\n size?: Size.Small | Size.Medium;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>\n & {\n id: string;\n state?: States.Invalid | States.Valid;\n onChange?: (text: string) => void;\n validationMessage?: string;\n size: Size.Small | Size.Medium;\n autoHeight?: boolean;\n margin?: string;\n note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n message: string;\n icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n id?: string;\n selected: boolean;\n select?: (selected: boolean) => void;\n label?: string;\n invalid?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n readOnly?: boolean;\n tabIndexVal?: number;\n className?: string;\n};\n"],"mappings":"AAuDC;AAAC"}
|
package/dist/Panel/Panel.cjs
CHANGED
|
@@ -94,7 +94,7 @@ var Panel = function Panel(props) {
|
|
|
94
94
|
shape: 'circular',
|
|
95
95
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {})
|
|
96
96
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
|
|
97
|
-
size: isLargeScreen ? _types.Size.Large : _types.Size.
|
|
97
|
+
size: isLargeScreen ? _types.Size.Large : _types.Size.Medium,
|
|
98
98
|
className: 'progress',
|
|
99
99
|
value: currentImage + 1,
|
|
100
100
|
max: props.items.length,
|
package/dist/Panel/Panel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Large","
|
|
1
|
+
{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Large","Medium","LinearProgressType","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ${BREAKPOINTS.LARGE} {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n`;\n\nconst Media = styled.div`\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ${BREAKPOINTS.LARGE} {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n`;\n\nconst Body = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ${COLORS.neutral_600};\n }\n\n\n`;\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n title?: string;\n content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n type?: 'default';\n order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n type: 'carousel';\n order?: 'default' | 'reverse';\n items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n const [currentImage, setCurrentImage] = React.useState(0);\n const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n let rest: React.HTMLAttributes<HTMLDivElement> = {};\n let order = undefined;\n let media = undefined;\n let title = '';\n let content = undefined;\n let items: PanelContent[] = [];\n\n\n switch (props.type) {\n case 'carousel':\n ({items = [], order, ...rest} = props);\n break;\n case 'default':\n default:\n ({media, content, title = '', order, ...rest} = props)\n break;\n }\n\n\n const moveLeft = () => {\n props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n }\n const moveRight = () => {\n props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n }\n\n const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n return (\n <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n <Media>\n {\n currentItem.media?.type === 'image' &&\n <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n }\n {\n currentItem.media?.type === 'custom' && currentItem.media.content\n }\n </Media>\n <Body>\n <Quote>{currentItem.title}</Quote>\n <p>{currentItem.content}</p>\n </Body>\n {\n props.type === 'carousel' &&\n <Footer>\n <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronLeft/>\n </IconButton>\n <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\n className={'progress'}\n value={currentImage + 1}\n max={props.items!.length }\n type={LinearProgressType.Dots}/>\n <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronRight/>\n </IconButton>\n </Footer>\n }\n </Wrapper>\n )\n};\n"],"mappings":"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"}
|
package/dist/Panel/Panel.js
CHANGED
|
@@ -88,7 +88,7 @@ export var Panel = function Panel(props) {
|
|
|
88
88
|
shape: 'circular',
|
|
89
89
|
children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {})
|
|
90
90
|
}), /*#__PURE__*/_jsx(LinearProgress, {
|
|
91
|
-
size: isLargeScreen ? Size.Large : Size.
|
|
91
|
+
size: isLargeScreen ? Size.Large : Size.Medium,
|
|
92
92
|
className: 'progress',
|
|
93
93
|
value: currentImage + 1,
|
|
94
94
|
max: props.items.length,
|
package/dist/Panel/Panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","LARGE","Media","Body","neutral_600","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Large","
|
|
1
|
+
{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","LARGE","Media","Body","neutral_600","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Large","Medium","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ${BREAKPOINTS.LARGE} {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n`;\n\nconst Media = styled.div`\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ${BREAKPOINTS.LARGE} {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n`;\n\nconst Body = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ${COLORS.neutral_600};\n }\n\n\n`;\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n title?: string;\n content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n type?: 'default';\n order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n type: 'carousel';\n order?: 'default' | 'reverse';\n items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n const [currentImage, setCurrentImage] = React.useState(0);\n const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n let rest: React.HTMLAttributes<HTMLDivElement> = {};\n let order = undefined;\n let media = undefined;\n let title = '';\n let content = undefined;\n let items: PanelContent[] = [];\n\n\n switch (props.type) {\n case 'carousel':\n ({items = [], order, ...rest} = props);\n break;\n case 'default':\n default:\n ({media, content, title = '', order, ...rest} = props)\n break;\n }\n\n\n const moveLeft = () => {\n props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n }\n const moveRight = () => {\n props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n }\n\n const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n return (\n <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n <Media>\n {\n currentItem.media?.type === 'image' &&\n <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n }\n {\n currentItem.media?.type === 'custom' && currentItem.media.content\n }\n </Media>\n <Body>\n <Quote>{currentItem.title}</Quote>\n <p>{currentItem.content}</p>\n </Body>\n {\n props.type === 'carousel' &&\n <Footer>\n <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronLeft/>\n </IconButton>\n <LinearProgress size={isLargeScreen ? Size.Large : Size.Medium}\n className={'progress'}\n value={currentImage + 1}\n max={props.items!.length }\n type={LinearProgressType.Dots}/>\n <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronRight/>\n </IconButton>\n </Footer>\n }\n </Wrapper>\n )\n};\n"],"mappings":"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"}
|