@atom-learning/components 3.14.0 → 3.15.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 +2 -4
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.d.ts +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.d.ts +3 -2
- package/dist/components/toggle-group/ToggleGroupRoot.js +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/index.d.ts +6 -2
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.d.ts +8 -0
- package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js +2 -0
- package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map +1 -0
- package/dist/utilities/radix-overrides/toggle-group/index.d.ts +6 -0
- package/dist/utilities/radix-overrides/toggle-group/index.js +2 -0
- package/dist/utilities/radix-overrides/toggle-group/index.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.15.0](https://github.com/Atom-Learning/components/compare/v3.14.0...v3.15.0) (2024-03-18)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* refactored to export popover and use children directly in Pagination ([2b6df8b](https://github.com/Atom-Learning/components/commit/2b6df8b96cf46608b66fce4fc2bb8725318e6abd))
|
|
8
|
-
* update test to reflect actual use case with icon and text ([de77f38](https://github.com/Atom-Learning/components/commit/de77f38ee622422199141c4da99924e135e810de))
|
|
6
|
+
* disableDeselect ToggleGroup functionality ([3daabe8](https://github.com/Atom-Learning/components/commit/3daabe8abc63ec02b732a7e3c2423cea0f849289))
|
|
9
7
|
|
|
10
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
11
9
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { ChipGroup } from '../../components/chip';
|
|
3
|
+
import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
|
|
4
4
|
declare type TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> & React.ComponentProps<typeof ToggleGroup.Root>;
|
|
5
5
|
export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps>;
|
|
6
6
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as o from"react";import"../chip/Chip.js";import{ChipGroup as e}from"../chip/ChipGroup.js";import{ToggleGroup as p}from"../../utilities/radix-overrides/toggle-group/index.js";const i=o.forwardRef((r,t)=>o.createElement(e,{ref:t,as:p.Root,orientation:"horizontal",...r}));export{i as ChipToggleGroupRoot};
|
|
2
2
|
//# sourceMappingURL=ChipToggleGroupRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as
|
|
1
|
+
{"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n return (\n <ChipGroup\n ref={ref}\n as={ToggleGroup.Root}\n orientation=\"horizontal\"\n {...props}\n />\n )\n })\n"],"names":["ChipToggleGroupRoot","React","props","ref","ChipGroup","ToggleGroup"],"mappings":"qLAQa,MAAAA,EACXC,EAAM,WAAW,CAACC,EAAOC,IAErBF,EAAA,cAACG,EAAA,CACC,IAAKD,EACL,GAAIE,EAAY,KAChB,YAAY,aACX,GAAGH,EACN,CAEH"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { TileGroup } from '../../components/tile';
|
|
3
|
+
import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
|
|
4
4
|
declare type TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> & React.ComponentProps<typeof ToggleGroup.Root>;
|
|
5
5
|
export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps>;
|
|
6
6
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"react";import"../tile/Tile.js";import{TileGroup as i}from"../tile/TileGroup.js";import{ToggleGroup as n}from"../../utilities/radix-overrides/toggle-group/index.js";const p=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,a=r.forwardRef((o,t)=>{const e=p(o.orientation);return r.createElement(i,{ref:t,as:n.Root,direction:e,gap:"2",wrap:"wrap",...o})});export{a as TileToggleGroupRoot};
|
|
2
2
|
//# sourceMappingURL=TileToggleGroupRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as
|
|
1
|
+
{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal'\n ? 'row'\n : orientation === 'vertical'\n ? 'column'\n : undefined\n\nexport const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n const direction = orientationToDirection(props.orientation)\n return (\n <TileGroup\n ref={ref}\n as={ToggleGroup.Root}\n direction={direction}\n gap=\"2\"\n wrap=\"wrap\"\n {...props}\n />\n )\n })\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"qLAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CAC/B,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,IAAI,IACJ,KAAK,OACJ,GAAGF,CACN,CAAA,CAEJ,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
|
2
1
|
import * as React from 'react';
|
|
3
2
|
import { Flex } from '../../components/flex';
|
|
4
3
|
declare type RootType = {
|
|
5
4
|
orientation?: 'horizontal' | 'vertical';
|
|
6
5
|
isFullWidth?: boolean;
|
|
7
6
|
};
|
|
8
|
-
export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(
|
|
7
|
+
export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<((import("@radix-ui/react-toggle-group").ToggleGroupSingleProps | import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>) & {
|
|
8
|
+
disableDeselect?: boolean | undefined;
|
|
9
|
+
}>, {
|
|
9
10
|
isFullWidth?: boolean | "true" | undefined;
|
|
10
11
|
hasGap?: boolean | "true" | "false" | undefined;
|
|
11
12
|
direction?: "row" | "column" | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"react";import{Flex as c}from"../flex/Flex.js";import{styled as f}from"../../stitches.js";import{ToggleGroup as m}from"../../utilities/radix-overrides/toggle-group/index.js";import{StyledItem as t}from"./ToggleGroupItem.js";const d=f(m.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i,isFullWidth:s,children:n,wrap:l,...p},h)=>{const e=typeof i=="number",a=u(o);return r.createElement(d,{ref:h,direction:a,hasGap:e,isFullWidth:s,orientation:o,...p},r.createElement(c,{direction:a,gap:e?i:void 0,wrap:l||"nowrap"},n))});export{d as StyledRoot,b as ToggleGroupRoot};
|
|
2
2
|
//# sourceMappingURL=ToggleGroupRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as
|
|
1
|
+
{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n orientation?: 'horizontal' | 'vertical'\n isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n width: 'fit-content',\n variants: {\n isFullWidth: {\n true: {\n width: '100%',\n [`& ${StyledItem}`]: {\n flexBasis: 0,\n flexGrow: 1\n }\n }\n },\n hasGap: {\n true: {\n [`& ${StyledItem}`]: { borderRadius: '$0' }\n },\n false: {\n borderRadius: '$0',\n bg: 'white',\n [`& ${StyledItem}`]: {\n bg: 'transparent',\n borderRadius: 0,\n position: 'relative',\n '&:not(:last-child)::before': {\n content: '',\n position: 'absolute'\n }\n }\n }\n },\n direction: {\n column: {},\n row: {}\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n top: '-1px',\n height: 'calc(100% + 2px)',\n width: '1px',\n right: '0',\n transform: 'translateX(150%)'\n },\n '&:not(:first-child)': {\n borderLeftColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderRightColor: 'transparent'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderBottomLeftRadius: '$0'\n },\n '&:last-child': {\n borderTopRightRadius: '$0',\n borderBottomRightRadius: '$0'\n }\n }\n }\n },\n {\n hasGap: false,\n direction: 'column',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n bottom: 0,\n left: '-1px',\n height: '1px',\n width: 'calc(100% + 2px)',\n transform: 'translateY(150%)'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0'\n },\n '&:last-child': {\n borderBottomLeftRadius: '$0',\n borderBottomRightRadius: '$0'\n },\n '&:not(:first-child)': {\n borderTopColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderBottomColor: 'transparent'\n }\n }\n }\n }\n ]\n})\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n React.ComponentProps<typeof StyledRoot> &\n RootType\n> = React.forwardRef(\n (\n { orientation = 'horizontal', gap, isFullWidth, children, wrap, ...rest },\n ref\n ) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n {...rest}\n >\n <Flex\n direction={direction}\n gap={hasGap ? gap : undefined}\n wrap={wrap || 'nowrap'}\n >\n {children}\n </Flex>\n </StyledRoot>\n )\n }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","wrap","rest","ref","hasGap","direction","Flex"],"mappings":"gPAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CAAE,aAAc,IAAK,CAC5C,EACA,MAAO,CACL,aAAc,KACd,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,EACd,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CACR,EAAA,IAAK,CAAA,CACP,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CAAE,YAAAF,EAAc,aAAc,IAAAG,EAAK,YAAAC,EAAa,SAAAC,EAAU,KAAAC,KAASC,CAAK,EACxEC,IACG,CACH,MAAMC,EAAS,OAAON,GAAQ,SACxBO,EAAYX,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EACC,CAAA,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaL,EACb,YAAaJ,EACZ,GAAGO,CAAAA,EAEJL,EAAA,cAACS,EAAA,CACC,UAAWD,EACX,IAAKD,EAASN,EAAM,OACpB,KAAMG,GAAQ,QAAA,EAEbD,CACH,CACF,CAEJ,CACF"}
|
|
@@ -1339,7 +1339,9 @@ export declare const ToggleGroup: {
|
|
|
1339
1339
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
1340
1340
|
};
|
|
1341
1341
|
}> | undefined;
|
|
1342
|
-
}, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement
|
|
1342
|
+
}, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
1343
|
+
disableDeselect?: boolean | undefined;
|
|
1344
|
+
}, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1343
1345
|
isFullWidth?: boolean | "true" | undefined;
|
|
1344
1346
|
hasGap?: boolean | "true" | "false" | undefined;
|
|
1345
1347
|
direction?: "row" | "column" | undefined;
|
|
@@ -1675,7 +1677,9 @@ export declare const ToggleGroup: {
|
|
|
1675
1677
|
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
1676
1678
|
};
|
|
1677
1679
|
}> | undefined;
|
|
1678
|
-
}) | (Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement
|
|
1680
|
+
}) | (Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
|
|
1681
|
+
disableDeselect?: boolean | undefined;
|
|
1682
|
+
}, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1679
1683
|
isFullWidth?: boolean | "true" | undefined;
|
|
1680
1684
|
hasGap?: boolean | "true" | "false" | undefined;
|
|
1681
1685
|
direction?: "row" | "column" | undefined;
|