@os-design/core 1.0.125 → 1.0.128

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.
@@ -15,6 +15,8 @@ var _utils = require("@os-design/utils");
15
15
 
16
16
  var _styled = _interopRequireDefault(require("@emotion/styled"));
17
17
 
18
+ var _media = require("@os-design/media");
19
+
18
20
  var _Button = _interopRequireDefault(require("../Button"));
19
21
 
20
22
  var _excluded = ["options", "disabled", "value", "defaultValue", "onChange", "size"],
@@ -48,7 +50,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
48
50
 
49
51
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
50
52
 
51
- var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: inline-flex;\n flex-wrap: wrap;\n ", ";\n"])), _styles.sizeStyles);
53
+ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n\n ", " {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ", ";\n"])), _media.m.max.xxs, _styles.sizeStyles);
52
54
  var LeftButton = (0, _styled["default"])(_Button["default"])(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n"])));
53
55
  var RightButton = (0, _styled["default"])(_Button["default"])(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n"])));
54
56
  var MiddleButton = (0, _styled["default"])(_Button["default"])(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0;\n"])));
@@ -99,7 +101,9 @@ var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
99
101
 
100
102
  var ButtonComponent = getButtonComponent(index, options === null || options === void 0 ? void 0 : options.length);
101
103
  return /*#__PURE__*/_react["default"].createElement(ButtonComponent, _extends({
104
+ key: valueOption,
102
105
  type: forwardedValue === valueOption ? 'primary' : 'ghost',
106
+ wide: "never",
103
107
  disabled: disabled || disabledOption,
104
108
  onClick: function onClick(e) {
105
109
  setForwardedValue(valueOption);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","sizeStyles","LeftButton","Button","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","ref","options","disabled","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,8HAGXC,kBAHW,CAAf;AAMA,IAAMC,UAAU,GAAG,wBAAOC,kBAAP,CAAH,0IAAhB;AAKA,IAAMC,WAAW,GAAG,wBAAOD,kBAAP,CAAH,wIAAjB;AAKA,IAAME,YAAY,GAAG,wBAAOF,kBAAP,CAAH,8FAAlB;;AAIA,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,MAAhB,EAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOL,kBAAP;AAClB,MAAII,KAAK,KAAK,CAAd,EAAiB,OAAOL,UAAP;AACjB,MAAIK,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,IAAMI,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEH;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEP;AAAtC,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC,iBAQEb,KARF,EASK;AAAA,QAPDc,KAOC,SAPDA,KAOC;AAAA,QANMC,WAMN,SANDT,KAMC;AAAA,QALSU,cAKT,SALDX,QAKC;AAAA,8BAJDY,OAIC;AAAA,QAJDA,QAIC,8BAJS,YAAM,CAAE,CAIjB;AAAA,QAHEC,UAGF;;AACH,QAAMC,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQI,OAAR,aAAQA,OAAR,uBAAQA,OAAO,CAAEH,MAAjB,CAA1C;AAEA,wBACE,gCAAC,eAAD;AACE,MAAA,IAAI,EAAEU,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OADrD;AAEE,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,cAFxB;AAGE,MAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACG,CAAD,CAAP;AACD;AANH,OAOMF,UAPN,GASGJ,KATH,CADF;AAaD,GA1BF,CADH,CADF;AAgCD,CAnDgB,CAAnB;AAsDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n title: string;\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: inline-flex;\n flex-wrap: wrap;\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\n};\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["Container","m","max","xxs","sizeStyles","LeftButton","Button","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","ref","options","disabled","value","defaultValue","onChange","size","rest","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,IAAMA,SAAS,GAAG,wBAAO,KAAP,EAAc,6BAAiB,MAAjB,CAAd,CAAH,qMAIXC,SAAEC,GAAF,CAAMC,GAJK,EAWXC,kBAXW,CAAf;AAcA,IAAMC,UAAU,GAAG,wBAAOC,kBAAP,CAAH,0IAAhB;AAKA,IAAMC,WAAW,GAAG,wBAAOD,kBAAP,CAAH,wIAAjB;AAKA,IAAME,YAAY,GAAG,wBAAOF,kBAAP,CAAH,8FAAlB;;AAIA,IAAMG,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAgBC,MAAhB,EAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOL,kBAAP;AAClB,MAAII,KAAK,KAAK,CAAd,EAAiB,OAAOL,UAAP;AACjB,MAAIK,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,IAAMI,UAAU,gBAAG,uBACjB,gBAUEC,GAVF,EAWK;AAAA,0BATDC,OASC;AAAA,MATDA,OASC,6BATS,EAST;AAAA,2BARDC,QAQC;AAAA,MARDA,QAQC,8BARU,KAQV;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,YAMC,QANDA,YAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,YAAM,CAAE,CAKlB;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHEC,IAGF;;AACH,2BAA4C,8BAAkB;AAC5DJ,IAAAA,KAAK,EAALA,KAD4D;AAE5DC,IAAAA,YAAY,EAAZA,YAF4D;AAG5DC,IAAAA,QAAQ,EAARA;AAH4D,GAAlB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AAMA,sBACE,gCAAC,SAAD;AAAW,IAAA,IAAI,EAAEH;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEP;AAAtC,MACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAES,GAAT,CACC,iBAQEb,KARF,EASK;AAAA,QAPDc,KAOC,SAPDA,KAOC;AAAA,QANMC,WAMN,SANDT,KAMC;AAAA,QALSU,cAKT,SALDX,QAKC;AAAA,8BAJDY,OAIC;AAAA,QAJDA,QAIC,8BAJS,YAAM,CAAE,CAIjB;AAAA,QAHEC,UAGF;;AACH,QAAMC,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQI,OAAR,aAAQA,OAAR,uBAAQA,OAAO,CAAEH,MAAjB,CAA1C;AAEA,wBACE,gCAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEV,QAAQ,IAAIW,cAJxB;AAKE,MAAA,OAAO,EAAE,iBAACI,CAAD,EAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;;AACAE,QAAAA,QAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArDgB,CAAnB;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;eAEenB,U","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\n};\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
@@ -4,10 +4,19 @@ import React, { forwardRef } from 'react';
4
4
  import { sizeStyles } from '@os-design/styles';
5
5
  import { omitEmotionProps, useForwardedState } from '@os-design/utils';
6
6
  import styled from '@emotion/styled';
7
+ import { m } from '@os-design/media';
7
8
  import Button from '../Button';
8
9
  const Container = styled('div', omitEmotionProps('size'))`
9
- display: inline-flex;
10
+ display: flex;
10
11
  flex-wrap: wrap;
12
+
13
+ ${m.max.xxs} {
14
+ width: 100%;
15
+ & > button {
16
+ flex: 1;
17
+ }
18
+ }
19
+
11
20
  ${sizeStyles};
12
21
  `;
13
22
  const LeftButton = styled(Button)`
@@ -60,7 +69,9 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
60
69
  }, index) => {
61
70
  const ButtonComponent = getButtonComponent(index, options?.length);
62
71
  return /*#__PURE__*/React.createElement(ButtonComponent, _extends({
72
+ key: valueOption,
63
73
  type: forwardedValue === valueOption ? 'primary' : 'ghost',
74
+ wide: "never",
64
75
  disabled: disabled || disabledOption,
65
76
  onClick: e => {
66
77
  setForwardedValue(valueOption);
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","Button","Container","LeftButton","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","options","disabled","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,OAAOC,MAAP,MAAoC,WAApC;AAwCA,MAAMC,SAAS,GAAGF,MAAM,CAAC,KAAD,EAAQF,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,IAAID,UAAW;AACf,CAJA;AAMA,MAAMM,UAAU,GAAGH,MAAM,CAACC,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAMG,WAAW,GAAGJ,MAAM,CAACC,MAAD,CAAS;AACnC;AACA;AACA,CAHA;AAKA,MAAMI,YAAY,GAAGL,MAAM,CAACC,MAAD,CAAS;AACpC;AACA,CAFA;;AAIA,MAAMK,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,MAAhB,KAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOP,MAAP;AAClB,MAAIM,KAAK,KAAK,CAAd,EAAiB,OAAOJ,UAAP;AACjB,MAAII,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,MAAMI,UAAU,gBAAGb,UAAU,CAC3B,CACE;AACEc,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,QAAQ,GAAG,KAFb;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,YAJF;AAKEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CALrB;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;AACH,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCpB,iBAAiB,CAAC;AAC5Da,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEC;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEC;AAAtC,MACGP,OAAO,EAAEU,GAAT,CACC,CACE;AACEC,IAAAA,KADF;AAEET,IAAAA,KAAK,EAAEU,WAFT;AAGEX,IAAAA,QAAQ,EAAEY,cAHZ;AAIEC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJpB;AAKE,OAAGC;AALL,GADF,EAQElB,KARF,KASK;AACH,UAAMmB,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQG,OAAO,EAAEF,MAAjB,CAA1C;AAEA,wBACE,oBAAC,eAAD;AACE,MAAA,IAAI,EAAEU,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OADrD;AAEE,MAAA,QAAQ,EAAEX,QAAQ,IAAIY,cAFxB;AAGE,MAAA,OAAO,EAAGI,CAAD,IAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD;AANH,OAOMF,UAPN,GASGJ,KATH,CADF;AAaD,GA1BF,CADH,CADF;AAgCD,CAnD0B,CAA7B;AAsDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;AAEA,eAAenB,UAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n title: string;\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: inline-flex;\n flex-wrap: wrap;\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\n};\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/RadioGroup/index.tsx"],"names":["React","forwardRef","sizeStyles","omitEmotionProps","useForwardedState","styled","m","Button","Container","max","xxs","LeftButton","RightButton","MiddleButton","getButtonComponent","index","length","RadioGroup","options","disabled","value","defaultValue","onChange","size","rest","ref","forwardedValue","setForwardedValue","map","title","valueOption","disabledOption","onClick","buttonRest","ButtonComponent","e","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,kBAApD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,MAAP,MAAoC,WAApC;AA8CA,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAD,EAAQF,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA,IAAIG,CAAC,CAACG,GAAF,CAAMC,GAAI;AACd;AACA;AACA;AACA;AACA;AACA;AACA,IAAIR,UAAW;AACf,CAZA;AAcA,MAAMS,UAAU,GAAGN,MAAM,CAACE,MAAD,CAAS;AAClC;AACA;AACA,CAHA;AAKA,MAAMK,WAAW,GAAGP,MAAM,CAACE,MAAD,CAAS;AACnC;AACA;AACA,CAHA;AAKA,MAAMM,YAAY,GAAGR,MAAM,CAACE,MAAD,CAAS;AACpC;AACA,CAFA;;AAIA,MAAMO,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,MAAhB,KAAmC;AAC5D,MAAIA,MAAM,KAAK,CAAf,EAAkB,OAAOT,MAAP;AAClB,MAAIQ,KAAK,KAAK,CAAd,EAAiB,OAAOJ,UAAP;AACjB,MAAII,KAAK,KAAKC,MAAM,GAAG,CAAvB,EAA0B,OAAOJ,WAAP;AAC1B,SAAOC,YAAP;AACD,CALD;AAOA;AACA;AACA;;;AACA,MAAMI,UAAU,gBAAGhB,UAAU,CAC3B,CACE;AACEiB,EAAAA,OAAO,GAAG,EADZ;AAEEC,EAAAA,QAAQ,GAAG,KAFb;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,YAJF;AAKEC,EAAAA,QAAQ,GAAG,MAAM,CAAE,CALrB;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;AACH,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCvB,iBAAiB,CAAC;AAC5DgB,IAAAA,KAD4D;AAE5DC,IAAAA,YAF4D;AAG5DC,IAAAA;AAH4D,GAAD,CAA7D;AAMA,sBACE,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEC;AAAjB,KAA2BC,IAA3B;AAAiC,IAAA,GAAG,EAAEC;AAAtC,MACGP,OAAO,EAAEU,GAAT,CACC,CACE;AACEC,IAAAA,KADF;AAEET,IAAAA,KAAK,EAAEU,WAFT;AAGEX,IAAAA,QAAQ,EAAEY,cAHZ;AAIEC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAJpB;AAKE,OAAGC;AALL,GADF,EAQElB,KARF,KASK;AACH,UAAMmB,eAAe,GAAGpB,kBAAkB,CAACC,KAAD,EAAQG,OAAO,EAAEF,MAAjB,CAA1C;AAEA,wBACE,oBAAC,eAAD;AACE,MAAA,GAAG,EAAEc,WADP;AAEE,MAAA,IAAI,EAAEJ,cAAc,KAAKI,WAAnB,GAAiC,SAAjC,GAA6C,OAFrD;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,QAAQ,EAAEX,QAAQ,IAAIY,cAJxB;AAKE,MAAA,OAAO,EAAGI,CAAD,IAAO;AACdR,QAAAA,iBAAiB,CAACG,WAAD,CAAjB;AACAE,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD;AARH,OASMF,UATN,GAWGJ,KAXH,CADF;AAeD,GA5BF,CADH,CADF;AAkCD,CArD0B,CAA7B;AAwDAZ,UAAU,CAACmB,WAAX,GAAyB,YAAzB;AAEA,eAAenB,UAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface RadioGroupOption\n extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {\n /**\n * The title of the option.\n */\n title: string;\n /**\n * The value of the option.\n */\n value: string;\n}\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface RadioGroupProps extends JsxDivProps, WithSize {\n /**\n * Options of the radio group.\n * @default undefined\n */\n options?: RadioGroupOption[];\n /**\n * Whether the radio group is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Selected option.\n * @default false\n */\n value?: string;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: string;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: string) => void;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n display: flex;\n flex-wrap: wrap;\n\n ${m.max.xxs} {\n width: 100%;\n & > button {\n flex: 1;\n }\n }\n\n ${sizeStyles};\n`;\n\nconst LeftButton = styled(Button)`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n`;\n\nconst RightButton = styled(Button)`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n`;\n\nconst MiddleButton = styled(Button)`\n border-radius: 0;\n`;\n\nconst getButtonComponent = (index: number, length: number) => {\n if (length === 1) return Button;\n if (index === 0) return LeftButton;\n if (index === length - 1) return RightButton;\n return MiddleButton;\n};\n\n/**\n * The radio buttons that allow a user to select only one of a limited number of options.\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n (\n {\n options = [],\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container size={size} {...rest} ref={ref}>\n {options?.map(\n (\n {\n title,\n value: valueOption,\n disabled: disabledOption,\n onClick = () => {},\n ...buttonRest\n },\n index\n ) => {\n const ButtonComponent = getButtonComponent(index, options?.length);\n\n return (\n <ButtonComponent\n key={valueOption}\n type={forwardedValue === valueOption ? 'primary' : 'ghost'}\n wide='never'\n disabled={disabled || disabledOption}\n onClick={(e) => {\n setForwardedValue(valueOption);\n onClick(e);\n }}\n {...buttonRest}\n >\n {title}\n </ButtonComponent>\n );\n }\n )}\n </Container>\n );\n }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\nexport default RadioGroup;\n"],"file":"index.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAK7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgCD,QAAA,MAAM,UAAU,wFAoDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAIzD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAInD,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,MAAM,CAAC;CACf;AAED,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,eAAgB,SAAQ,WAAW,EAAE,QAAQ;IAK5D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAK7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAwCD,QAAA,MAAM,UAAU,wFAsDf,CAAC;AAIF,eAAe,UAAU,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.125",
3
+ "version": "1.0.128",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
56
56
  "react": ">=18",
57
57
  "react-dom": ">=18"
58
58
  },
59
- "gitHead": "f1cda748407e21bcaf133e976e76bbf36e81fbd6"
59
+ "gitHead": "8e09c32a1f37907e86bb2a6467a7e45d4570bfd7"
60
60
  }