@atom-learning/components 3.32.1 → 3.33.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/CHANGELOG.md +3 -3
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map +1 -1
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/table/TableHeaderCell.js +1 -1
- package/dist/components/table/TableHeaderCell.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# [3.33.0](https://github.com/Atom-Learning/components/compare/v3.32.2...v3.33.0) (2024-09-30)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add bottom border to table header cells ([200b5ed](https://github.com/Atom-Learning/components/commit/200b5ed6b0160f66a01600d2c7ebc91ce7624b5d))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from"react";import{Text as o}from"../text/Text.js";import{styled as i}from"../../stitches.js";import"../side-bar/SideBar.js";import{useSidebarState as r}from"../side-bar/SideBarContext.js";const s="10rem",n=i.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(o,{fontWeight:"var(--navigation-menu-vertical-item-font-weight)",lineHeight:1.2,width:"max-content",maxWidth:s,variants:{isExpanded:{true:{opacity:1,"@allowMotion":{transform:"translate(0)",transition:"opacity 125ms ease-out, transform 125ms ease-out"}},false:{opacity:0,"@allowMotion":{transform:"translate(8px)",transition:"opacity 125ms ease-out, transform 0ms ease-out 125ms"}}}}}),m=t=>{const{isExpanded:e}=r();return a.createElement(n,{size:"md",as:"span",...t,isExpanded:e})};export{m as NavigationMenuVerticalText};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuVerticalText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { useSidebarState } from '../side-bar'\n\nconst SIZE_EXPANDED_MAX = '10rem'\n\nconst StyledNavigationMenuVerticalText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n fontWeight: 'var(--navigation-menu-vertical-item-font-weight)',\n lineHeight: 1.2,\n variants: {\n isExpanded: {\n true: {\n
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/stitches'\n\nimport { useSidebarState } from '../side-bar'\n\nconst SIZE_EXPANDED_MAX = '10rem'\n\nconst StyledNavigationMenuVerticalText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n fontWeight: 'var(--navigation-menu-vertical-item-font-weight)',\n lineHeight: 1.2,\n width: 'max-content',\n maxWidth: SIZE_EXPANDED_MAX,\n variants: {\n isExpanded: {\n true: {\n opacity: 1,\n '@allowMotion': {\n transform: 'translate(0)',\n transition: 'opacity 125ms ease-out, transform 125ms ease-out'\n }\n },\n false: {\n opacity: 0,\n '@allowMotion': {\n transform: 'translate(8px)',\n transition: 'opacity 125ms ease-out, transform 0ms ease-out 125ms'\n }\n }\n }\n }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n const { isExpanded } = useSidebarState()\n return (\n <StyledNavigationMenuVerticalText\n size=\"md\"\n as=\"span\"\n {...props}\n isExpanded={isExpanded}\n />\n )\n}\n"],"names":["SIZE_EXPANDED_MAX","StyledNavigationMenuVerticalText","styled","propName","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"sMAOA,MAAMA,EAAoB,QAEpBC,EAAmCC,EAAO,WAAW,CACzD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,WAAY,mDACZ,WAAY,IACZ,MAAO,cACP,SAAUJ,EACV,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,EACT,eAAgB,CACd,UAAW,eACX,WAAY,kDACd,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,iBACX,WAAY,sDACd,CACF,CACF,CACF,CACF,CAAC,EAMYK,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAgB,EACvC,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGK,EACJ,WAAYC,CAAAA,CACd,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n css?: CSS\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n color: '$tonal300',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' | 'md' | 'lg'\n css?: CSS\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n color: '$tonal300',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n {\n display: 'none'\n }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n React.forwardRef(\n (\n {\n size = 'md',\n css,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(\n ref,\n () => inputElRef.current as HTMLInputElement\n )\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n css={{\n size: size == 'sm' ? '$1' : 20,\n top: '50%',\n transform: 'translateY(-50%)'\n }}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n css={{\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n right: '$1'\n }}\n onClick={handleClear}\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n css={{ position: 'relative', width: 'auto', ...css }}\n size={size}\n >\n <StyledSearchInputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n css={{ pr: size === 'sm' ? '$5' : '$6' }}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GAAAA,IACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,OAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAvFhC,IAAAC,EAAAC,EAwFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,YAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,EACxC,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,MACRjB,EAAAA,GAAA,MAAAA,EAAgB,EAAA,CAClB,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,CAEX,EAAA,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,CAChBX,EAAAA,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CAAA,CACF,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAAAA,EAETnB,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAAA,CAAO,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,KAAMD,CAAAA,EAEND,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as l}from"../../stitches.js";const e=l("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
|
|
1
|
+
import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $tonal100",color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle"});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
|
|
2
2
|
//# sourceMappingURL=TableHeaderCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n color: 'white',\n fontFamily: '$body',\n fontWeight: 600,\n lineHeight: 1.5,\n textAlign: 'left',\n verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n borderBottom: '1px solid $tonal100',\n color: 'white',\n fontFamily: '$body',\n fontWeight: 600,\n lineHeight: 1.5,\n textAlign: 'left',\n verticalAlign: 'middle'\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEa,MAAAA,EAAkBC,EAAO,KAAM,CAC1C,aAAc,sBACd,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}
|