@os-design/core 1.0.133 → 1.0.136

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.
Files changed (205) hide show
  1. package/dist/cjs/Alert/index.js.map +1 -1
  2. package/dist/cjs/Avatar/index.js.map +1 -1
  3. package/dist/cjs/Avatar/utils/nameToInitials.js.map +1 -1
  4. package/dist/cjs/Avatar/utils/strToHue.js.map +1 -1
  5. package/dist/cjs/AvatarSkeleton/index.js.map +1 -1
  6. package/dist/cjs/Breadcrumb/index.js.map +1 -1
  7. package/dist/cjs/BreadcrumbItem/index.js.map +1 -1
  8. package/dist/cjs/Button/ButtonContent.js.map +1 -1
  9. package/dist/cjs/Button/index.js.map +1 -1
  10. package/dist/cjs/Button/utils/useButtonColors.js.map +1 -1
  11. package/dist/cjs/Checkbox/index.js.map +1 -1
  12. package/dist/cjs/CheckboxSkeleton/index.js.map +1 -1
  13. package/dist/cjs/DatePicker/DatePickerCalendar.js.map +1 -1
  14. package/dist/cjs/DatePicker/index.js.map +1 -1
  15. package/dist/cjs/Drawer/index.js.map +1 -1
  16. package/dist/cjs/Form/FormConfigContext.js.map +1 -1
  17. package/dist/cjs/Form/index.js.map +1 -1
  18. package/dist/cjs/FormDivider/index.js.map +1 -1
  19. package/dist/cjs/FormItem/index.js.map +1 -1
  20. package/dist/cjs/FormItem/utils/firstChildHasType.js.map +1 -1
  21. package/dist/cjs/GlobalStyles/index.js.map +1 -1
  22. package/dist/cjs/GlobalStyles/resetStyles.js.map +1 -1
  23. package/dist/cjs/GlobalStyles/typographyStyles.js.map +1 -1
  24. package/dist/cjs/HeaderSkeleton/index.js.map +1 -1
  25. package/dist/cjs/Image/index.js.map +1 -1
  26. package/dist/cjs/ImageSkeleton/index.js.map +1 -1
  27. package/dist/cjs/Input/index.js.map +1 -1
  28. package/dist/cjs/Input/utils/getFocusableElements.js.map +1 -1
  29. package/dist/cjs/InputNumber/index.js.map +1 -1
  30. package/dist/cjs/InputNumber/utils/defaultLocale.js.map +1 -1
  31. package/dist/cjs/InputPassword/index.js.map +1 -1
  32. package/dist/cjs/InputPassword/utils/defaultLocale.js.map +1 -1
  33. package/dist/cjs/InputSearch/index.js.map +1 -1
  34. package/dist/cjs/InputSearch/utils/defaultLocale.js.map +1 -1
  35. package/dist/cjs/InputSkeleton/index.js.map +1 -1
  36. package/dist/cjs/Layout/LayoutContext.js.map +1 -1
  37. package/dist/cjs/Layout/index.js.map +1 -1
  38. package/dist/cjs/Link/index.js.map +1 -1
  39. package/dist/cjs/LinkButton/index.js.map +1 -1
  40. package/dist/cjs/List/WindowScroller.js.map +1 -1
  41. package/dist/cjs/List/index.js +11 -7
  42. package/dist/cjs/List/index.js.map +1 -1
  43. package/dist/cjs/List/utils/bodyPointerEvents.js.map +1 -1
  44. package/dist/cjs/List/utils/frameTimeout.js.map +1 -1
  45. package/dist/cjs/List/utils/useRWLoadNext.js.map +1 -1
  46. package/dist/cjs/ListItem/ListItemContent.js.map +1 -1
  47. package/dist/cjs/ListItem/index.js.map +1 -1
  48. package/dist/cjs/ListItemLink/index.js.map +1 -1
  49. package/dist/cjs/ListSkeleton/index.js.map +1 -1
  50. package/dist/cjs/LogoLink/index.js.map +1 -1
  51. package/dist/cjs/Menu/index.js.map +1 -1
  52. package/dist/cjs/Menu/utils/useFocusWithArrows.js.map +1 -1
  53. package/dist/cjs/MenuDivider/index.js.map +1 -1
  54. package/dist/cjs/MenuGroup/index.js.map +1 -1
  55. package/dist/cjs/MenuItem/index.js.map +1 -1
  56. package/dist/cjs/Modal/index.js.map +1 -1
  57. package/dist/cjs/Modal/utils/defaultLocale.js.map +1 -1
  58. package/dist/cjs/Navigation/index.js.map +1 -1
  59. package/dist/cjs/Navigation/utils/useScrollFlags.js.map +1 -1
  60. package/dist/cjs/NavigationItem/index.js.map +1 -1
  61. package/dist/cjs/PageContent/index.js.map +1 -1
  62. package/dist/cjs/PageHeader/index.js.map +1 -1
  63. package/dist/cjs/PageHeader/utils/defaultLocale.js.map +1 -1
  64. package/dist/cjs/PageHeaderInputSearch/index.js.map +1 -1
  65. package/dist/cjs/PageHeaderInputSearch/utils/defaultLocale.js.map +1 -1
  66. package/dist/cjs/PageHeaderSkeleton/index.js.map +1 -1
  67. package/dist/cjs/ParagraphSkeleton/index.js.map +1 -1
  68. package/dist/cjs/Popover/index.js.map +1 -1
  69. package/dist/cjs/Popover/utils/usePopoverPosition.js.map +1 -1
  70. package/dist/cjs/Progress/index.js.map +1 -1
  71. package/dist/cjs/RadioGroup/index.js +4 -6
  72. package/dist/cjs/RadioGroup/index.js.map +1 -1
  73. package/dist/cjs/RadioGroupSkeleton/index.js.map +1 -1
  74. package/dist/cjs/Result/index.js.map +1 -1
  75. package/dist/cjs/ScrollButton/index.js.map +1 -1
  76. package/dist/cjs/ScrollButton/utils/useContainerPosition.js.map +1 -1
  77. package/dist/cjs/ScrollButton/utils/useVisibility.js.map +1 -1
  78. package/dist/cjs/Select/SelectList.js +2 -3
  79. package/dist/cjs/Select/SelectList.js.map +1 -1
  80. package/dist/cjs/Select/SelectToggle.js.map +1 -1
  81. package/dist/cjs/Select/index.js.map +1 -1
  82. package/dist/cjs/Select/utils/defaultLocale.js.map +1 -1
  83. package/dist/cjs/Skeleton/index.js.map +1 -1
  84. package/dist/cjs/Switch/index.js.map +1 -1
  85. package/dist/cjs/SwitchSkeleton/index.js.map +1 -1
  86. package/dist/cjs/Tag/index.js.map +1 -1
  87. package/dist/cjs/TagLink/index.js.map +1 -1
  88. package/dist/cjs/TagList/index.js.map +1 -1
  89. package/dist/cjs/TagListSkeleton/index.js.map +1 -1
  90. package/dist/cjs/TagSkeleton/index.js.map +1 -1
  91. package/dist/cjs/TextArea/index.js.map +1 -1
  92. package/dist/cjs/TextAreaSkeleton/index.js.map +1 -1
  93. package/dist/cjs/ThemeSwitcher/index.js.map +1 -1
  94. package/dist/cjs/YouTubeVideo/index.js.map +1 -1
  95. package/dist/cjs/emotion.d.js.map +1 -1
  96. package/dist/cjs/index.js.map +1 -1
  97. package/dist/cjs/message/AlertIcon.js.map +1 -1
  98. package/dist/cjs/message/Message.js.map +1 -1
  99. package/dist/cjs/message/index.js.map +1 -1
  100. package/dist/cjs/message/styles.js.map +1 -1
  101. package/dist/esm/Alert/index.js.map +1 -1
  102. package/dist/esm/Avatar/index.js.map +1 -1
  103. package/dist/esm/Avatar/utils/nameToInitials.js.map +1 -1
  104. package/dist/esm/Avatar/utils/strToHue.js.map +1 -1
  105. package/dist/esm/AvatarSkeleton/index.js.map +1 -1
  106. package/dist/esm/Breadcrumb/index.js.map +1 -1
  107. package/dist/esm/BreadcrumbItem/index.js.map +1 -1
  108. package/dist/esm/Button/ButtonContent.js.map +1 -1
  109. package/dist/esm/Button/index.js.map +1 -1
  110. package/dist/esm/Button/utils/useButtonColors.js.map +1 -1
  111. package/dist/esm/Checkbox/index.js.map +1 -1
  112. package/dist/esm/CheckboxSkeleton/index.js.map +1 -1
  113. package/dist/esm/DatePicker/DatePickerCalendar.js.map +1 -1
  114. package/dist/esm/DatePicker/index.js.map +1 -1
  115. package/dist/esm/Drawer/index.js.map +1 -1
  116. package/dist/esm/Form/FormConfigContext.js.map +1 -1
  117. package/dist/esm/Form/index.js.map +1 -1
  118. package/dist/esm/FormDivider/index.js.map +1 -1
  119. package/dist/esm/FormItem/index.js.map +1 -1
  120. package/dist/esm/FormItem/utils/firstChildHasType.js.map +1 -1
  121. package/dist/esm/GlobalStyles/index.js.map +1 -1
  122. package/dist/esm/GlobalStyles/resetStyles.js.map +1 -1
  123. package/dist/esm/GlobalStyles/typographyStyles.js.map +1 -1
  124. package/dist/esm/HeaderSkeleton/index.js.map +1 -1
  125. package/dist/esm/Image/index.js.map +1 -1
  126. package/dist/esm/ImageSkeleton/index.js.map +1 -1
  127. package/dist/esm/Input/index.js.map +1 -1
  128. package/dist/esm/Input/utils/getFocusableElements.js.map +1 -1
  129. package/dist/esm/InputNumber/index.js.map +1 -1
  130. package/dist/esm/InputNumber/utils/defaultLocale.js.map +1 -1
  131. package/dist/esm/InputPassword/index.js.map +1 -1
  132. package/dist/esm/InputPassword/utils/defaultLocale.js.map +1 -1
  133. package/dist/esm/InputSearch/index.js.map +1 -1
  134. package/dist/esm/InputSearch/utils/defaultLocale.js.map +1 -1
  135. package/dist/esm/InputSkeleton/index.js.map +1 -1
  136. package/dist/esm/Layout/LayoutContext.js.map +1 -1
  137. package/dist/esm/Layout/index.js.map +1 -1
  138. package/dist/esm/Link/index.js.map +1 -1
  139. package/dist/esm/LinkButton/index.js.map +1 -1
  140. package/dist/esm/List/WindowScroller.js.map +1 -1
  141. package/dist/esm/List/index.js +8 -6
  142. package/dist/esm/List/index.js.map +1 -1
  143. package/dist/esm/List/utils/bodyPointerEvents.js.map +1 -1
  144. package/dist/esm/List/utils/frameTimeout.js.map +1 -1
  145. package/dist/esm/List/utils/useRWLoadNext.js.map +1 -1
  146. package/dist/esm/ListItem/ListItemContent.js.map +1 -1
  147. package/dist/esm/ListItem/index.js.map +1 -1
  148. package/dist/esm/ListItemLink/index.js.map +1 -1
  149. package/dist/esm/ListSkeleton/index.js.map +1 -1
  150. package/dist/esm/LogoLink/index.js.map +1 -1
  151. package/dist/esm/Menu/index.js.map +1 -1
  152. package/dist/esm/Menu/utils/useFocusWithArrows.js.map +1 -1
  153. package/dist/esm/MenuDivider/index.js.map +1 -1
  154. package/dist/esm/MenuGroup/index.js.map +1 -1
  155. package/dist/esm/MenuItem/index.js.map +1 -1
  156. package/dist/esm/Modal/index.js.map +1 -1
  157. package/dist/esm/Modal/utils/defaultLocale.js.map +1 -1
  158. package/dist/esm/Navigation/index.js.map +1 -1
  159. package/dist/esm/Navigation/utils/useScrollFlags.js.map +1 -1
  160. package/dist/esm/NavigationItem/index.js.map +1 -1
  161. package/dist/esm/PageContent/index.js.map +1 -1
  162. package/dist/esm/PageHeader/index.js.map +1 -1
  163. package/dist/esm/PageHeader/utils/defaultLocale.js.map +1 -1
  164. package/dist/esm/PageHeaderInputSearch/index.js.map +1 -1
  165. package/dist/esm/PageHeaderInputSearch/utils/defaultLocale.js.map +1 -1
  166. package/dist/esm/PageHeaderSkeleton/index.js.map +1 -1
  167. package/dist/esm/ParagraphSkeleton/index.js.map +1 -1
  168. package/dist/esm/Popover/index.js.map +1 -1
  169. package/dist/esm/Popover/utils/usePopoverPosition.js.map +1 -1
  170. package/dist/esm/Progress/index.js.map +1 -1
  171. package/dist/esm/RadioGroup/index.js +3 -5
  172. package/dist/esm/RadioGroup/index.js.map +1 -1
  173. package/dist/esm/RadioGroupSkeleton/index.js.map +1 -1
  174. package/dist/esm/Result/index.js.map +1 -1
  175. package/dist/esm/ScrollButton/index.js.map +1 -1
  176. package/dist/esm/ScrollButton/utils/useContainerPosition.js.map +1 -1
  177. package/dist/esm/ScrollButton/utils/useVisibility.js.map +1 -1
  178. package/dist/esm/Select/SelectList.js +3 -4
  179. package/dist/esm/Select/SelectList.js.map +1 -1
  180. package/dist/esm/Select/SelectToggle.js.map +1 -1
  181. package/dist/esm/Select/index.js.map +1 -1
  182. package/dist/esm/Select/utils/defaultLocale.js.map +1 -1
  183. package/dist/esm/Skeleton/index.js.map +1 -1
  184. package/dist/esm/Switch/index.js.map +1 -1
  185. package/dist/esm/SwitchSkeleton/index.js.map +1 -1
  186. package/dist/esm/Tag/index.js.map +1 -1
  187. package/dist/esm/TagLink/index.js.map +1 -1
  188. package/dist/esm/TagList/index.js.map +1 -1
  189. package/dist/esm/TagListSkeleton/index.js.map +1 -1
  190. package/dist/esm/TagSkeleton/index.js.map +1 -1
  191. package/dist/esm/TextArea/index.js.map +1 -1
  192. package/dist/esm/TextAreaSkeleton/index.js.map +1 -1
  193. package/dist/esm/ThemeSwitcher/index.js.map +1 -1
  194. package/dist/esm/YouTubeVideo/index.js.map +1 -1
  195. package/dist/esm/emotion.d.js.map +1 -1
  196. package/dist/esm/index.js.map +1 -1
  197. package/dist/esm/message/AlertIcon.js.map +1 -1
  198. package/dist/esm/message/Message.js.map +1 -1
  199. package/dist/esm/message/index.js.map +1 -1
  200. package/dist/esm/message/styles.js.map +1 -1
  201. package/dist/types/List/index.d.ts +1 -0
  202. package/dist/types/List/index.d.ts.map +1 -1
  203. package/dist/types/RadioGroup/index.d.ts.map +1 -1
  204. package/dist/types/Select/SelectList.d.ts.map +1 -1
  205. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/message/Message.tsx"],"names":["fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","fadeOut","Container","p","backgroundColor","textColor","transitionDelay","Text","styled","span","ellipsisStyles","Message","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","colorText","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAOA,IAAMA,MAAM,OAAGC,iBAAH,wMAAZ;AAWA,IAAMC,iBAAiB,GAAG,GAA1B;AACA,IAAMC,qBAAqB,GAAG,GAA9B;AACO,IAAMC,mBAAmB,GAAG,IAA5B;;AAEP,IAAMC,OAAO,OAAGJ,iBAAH,6RAGCC,iBAHD,EAIKC,qBAJL,CAAb;AAoBA,IAAMG,SAAS,GAAG,wBAChB,KADgB,EAEhB,6BAAiB,MAAjB,EAAyB,WAAzB,EAAsC,iBAAtC,EAAyD,iBAAzD,CAFgB,CAAH,sgBAQHJ,iBARG,EASCC,qBATD,EAiBO,UAACI,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACC,eAAN,CAAP;AAAA,CAjBP,EAkBJ,UAACD,CAAD;AAAA,SAAO,kBAAIA,CAAC,CAACE,SAAN,CAAP;AAAA,CAlBI,EAuBAT,MAvBA,EAuBU,UAACO,CAAD;AAAA,SAAOA,CAAC,CAACG,eAAT;AAAA,CAvBV,EAwBTL,OAxBS,EAwBE,UAACE,CAAD;AAAA,SAAOA,CAAC,CAACG,eAAT;AAAA,CAxBF,EAyBP,UAACH,CAAD;AAAA,SAAOH,mBAAmB,GAAGG,CAAC,CAACG,eAA/B;AAAA,CAzBO,CAAf;;AA6BA,IAAMC,IAAI,GAAGC,mBAAOC,IAAV,mFACNC,sBADM,CAAV;;AAIA,IAAMC,OAAO,gBAAG,uBACd,gBAAiBC,GAAjB,EAAyB;AAAA,MAAtBC,IAAsB,QAAtBA,IAAsB;AAAA,MAAhBC,IAAgB,QAAhBA,IAAgB;AACvB,MAAMV,eAAe,GAAG;AACtBW,IAAAA,IAAI,EAAEC,eAAMC,kBADU;AAEtBC,IAAAA,OAAO,EAAEF,eAAMG,qBAFO;AAGtBC,IAAAA,KAAK,EAAEJ,eAAMK;AAHS,IAItBR,IAJsB,CAAxB;AAMA,sBACE,gCAAC,SAAD;AACE,IAAA,GAAG,EAAED,GADP;AAEE,IAAA,IAAI,EAAEC,IAFR;AAGE,IAAA,SAAS,EAAEG,eAAMM,SAHnB;AAIE,IAAA,eAAe,EAAElB,eAJnB;AAKE,IAAA,eAAe,EAAEY,eAAMV,eALzB;AAME,IAAA,IAAI,EAAC;AANP,kBAQE,gCAAC,qBAAD;AAAW,IAAA,IAAI,EAAEO;AAAjB,IARF,eASE,gCAAC,IAAD,QAAOC,IAAP,CATF,CADF;AAaD,CArBa,CAAhB;AAwBAH,OAAO,CAACY,WAAR,GAAsB,SAAtB;eAEeZ,O","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n type: 'info' | 'success' | 'error';\n text: string;\n}\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n height: 0;\n margin-top: 0;\n transform: translateY(-100%);\n }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n textColor: Color;\n backgroundColor: Color;\n transitionDelay: number;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n box-sizing: border-box;\n padding: 0 1em;\n max-width: 90%;\n\n border-radius: 0.25em;\n box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n background-color: ${(p) => clr(p.backgroundColor)};\n color: ${(p) => clr(p.textColor)};\n\n pointer-events: auto;\n overflow: hidden;\n\n animation: ${fadeIn} ${(p) => p.transitionDelay}ms,\n ${fadeOut} ${(p) => p.transitionDelay}ms\n ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ type, text }, ref) => {\n const backgroundColor = {\n info: light.messageInfoColorBg,\n success: light.messageSuccessColorBg,\n error: light.messageErrorColorBg,\n }[type];\n\n return (\n <Container\n ref={ref}\n type={type}\n textColor={light.colorText}\n backgroundColor={backgroundColor}\n transitionDelay={light.transitionDelay}\n role='alert'\n >\n <AlertIcon type={type} />\n <Text>{text}</Text>\n </Container>\n );\n }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"file":"Message.js"}
1
+ {"version":3,"file":"Message.js","names":["fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","fadeOut","Container","styled","omitEmotionProps","p","clr","backgroundColor","textColor","transitionDelay","Text","span","ellipsisStyles","Message","forwardRef","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","colorText","displayName"],"sources":["../../../src/message/Message.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n type: 'info' | 'success' | 'error';\n text: string;\n}\n\nconst fadeIn = keyframes`\n from {\n opacity: 0;\n transform: translateY(-100%);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n from {\n opacity: 1;\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n transform: translateY(0);\n }\n to {\n opacity: 0;\n height: 0;\n margin-top: 0;\n transform: translateY(-100%);\n }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n textColor: Color;\n backgroundColor: Color;\n transitionDelay: number;\n}\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n height: ${MESSAGE_HEIGHT_EM}em;\n margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n box-sizing: border-box;\n padding: 0 1em;\n max-width: 90%;\n\n border-radius: 0.25em;\n box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n background-color: ${(p) => clr(p.backgroundColor)};\n color: ${(p) => clr(p.textColor)};\n\n pointer-events: auto;\n overflow: hidden;\n\n animation: ${fadeIn} ${(p) => p.transitionDelay}ms,\n ${fadeOut} ${(p) => p.transitionDelay}ms\n ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n ({ type, text }, ref) => {\n const backgroundColor = {\n info: light.messageInfoColorBg,\n success: light.messageSuccessColorBg,\n error: light.messageErrorColorBg,\n }[type];\n\n return (\n <Container\n ref={ref}\n type={type}\n textColor={light.colorText}\n backgroundColor={backgroundColor}\n transitionDelay={light.transitionDelay}\n role='alert'\n >\n <AlertIcon type={type} />\n <Text>{text}</Text>\n </Container>\n );\n }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAOA,IAAMA,MAAM,OAAGC,iBAAH,wMAAZ;AAWA,IAAMC,iBAAiB,GAAG,GAA1B;AACA,IAAMC,qBAAqB,GAAG,GAA9B;AACO,IAAMC,mBAAmB,GAAG,IAA5B;;AAEP,IAAMC,OAAO,OAAGJ,iBAAH,6RAGCC,iBAHD,EAIKC,qBAJL,CAAb;AAoBA,IAAMG,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,WAAzB,EAAsC,iBAAtC,EAAyD,iBAAzD,CAFgB,CAAH,sgBAQHN,iBARG,EASCC,qBATD,EAiBO,UAACM,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,eAAN,CAAP;AAAA,CAjBP,EAkBJ,UAACF,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACG,SAAN,CAAP;AAAA,CAlBI,EAuBAZ,MAvBA,EAuBU,UAACS,CAAD;EAAA,OAAOA,CAAC,CAACI,eAAT;AAAA,CAvBV,EAwBTR,OAxBS,EAwBE,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACI,eAAT;AAAA,CAxBF,EAyBP,UAACJ,CAAD;EAAA,OAAOL,mBAAmB,GAAGK,CAAC,CAACI,eAA/B;AAAA,CAzBO,CAAf;;AA6BA,IAAMC,IAAI,GAAGP,kBAAA,CAAOQ,IAAV,mFACNC,sBADM,CAAV;;AAIA,IAAMC,OAAO,gBAAG,IAAAC,iBAAA,EACd,gBAAiBC,GAAjB,EAAyB;EAAA,IAAtBC,IAAsB,QAAtBA,IAAsB;EAAA,IAAhBC,IAAgB,QAAhBA,IAAgB;EACvB,IAAMV,eAAe,GAAG;IACtBW,IAAI,EAAEC,cAAA,CAAMC,kBADU;IAEtBC,OAAO,EAAEF,cAAA,CAAMG,qBAFO;IAGtBC,KAAK,EAAEJ,cAAA,CAAMK;EAHS,EAItBR,IAJsB,CAAxB;EAMA,oBACE,gCAAC,SAAD;IACE,GAAG,EAAED,GADP;IAEE,IAAI,EAAEC,IAFR;IAGE,SAAS,EAAEG,cAAA,CAAMM,SAHnB;IAIE,eAAe,EAAElB,eAJnB;IAKE,eAAe,EAAEY,cAAA,CAAMV,eALzB;IAME,IAAI,EAAC;EANP,gBAQE,gCAAC,qBAAD;IAAW,IAAI,EAAEO;EAAjB,EARF,eASE,gCAAC,IAAD,QAAOC,IAAP,CATF,CADF;AAaD,CArBa,CAAhB;AAwBAJ,OAAO,CAACa,WAAR,GAAsB,SAAtB;eAEeb,O"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/message/index.tsx"],"names":["containerElement","getContainer","document","createElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","ReactDOM","render","setTimeout","unmountComponentAtNode","MESSAGE_DURATION_MS","message","info","success","error"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAMA,IAAIA,gBAAJ;AAEA;AACA;AACA;;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,MAAI,CAACD,gBAAL,EAAuB;AACrBA,IAAAA,gBAAgB,GAAGE,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,wCAAuBH,gBAAvB,EAAyCI,uBAAzC;AACAF,IAAAA,QAAQ,CAACG,IAAT,CAAcC,WAAd,CAA0BN,gBAA1B;AACD;;AACD,SAAOA,gBAAP;AACD,CAPD;AASA;AACA;AACA;;;AACA,IAAMO,6BAA6B,GAAG,SAAhCA,6BAAgC,GAAM;AAC1C,MAAI,CAACP,gBAAD,IAAqBA,gBAAgB,CAACQ,aAAjB,EAAzB,EAA2D;AAC3DN,EAAAA,QAAQ,CAACG,IAAT,CAAcI,WAAd,CAA0BT,gBAA1B;AACAA,EAAAA,gBAAgB,GAAG,IAAnB;AACD,CAJD;AAMA;AACA;AACA;;;AACA,IAAMU,IAAI,GAAG,SAAPA,IAAO,CAACC,IAAD,EAA2BC,IAA3B,EAA4C;AACvD;AACA,MAAMC,SAAS,GAAGZ,YAAY,EAA9B;AACA,MAAMa,gBAAgB,GAAGZ,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAzB;AACA,sCAAuBW,gBAAvB,EAAyCC,8BAAzC;AACAF,EAAAA,SAAS,CAACP,WAAV,CAAsBQ,gBAAtB,EALuD,CAOvD;;AACA,MAAME,cAAc,gBAAG,gCAAC,mBAAD;AAAS,IAAA,IAAI,EAAEL,IAAf;AAAqB,IAAA,IAAI,EAAEC;AAA3B,IAAvB;;AACAK,uBAASC,MAAT,CAAgBF,cAAhB,EAAgCF,gBAAhC,EATuD,CAWvD;;;AACAK,EAAAA,UAAU,CAAC,YAAM;AACfF,yBAASG,sBAAT,CAAgCN,gBAAhC;;AACAD,IAAAA,SAAS,CAACJ,WAAV,CAAsBK,gBAAtB;AACAP,IAAAA,6BAA6B;AAC9B,GAJS,EAIPc,4BAJO,CAAV;AAKD,CAjBD;;AAmBA,IAAMC,OAA2D,GAAG;AAClEC,EAAAA,IAAI,EAAE,cAACX,IAAD;AAAA,WAAUF,IAAI,CAAC,MAAD,EAASE,IAAT,CAAd;AAAA,GAD4D;AAElEY,EAAAA,OAAO,EAAE,iBAACZ,IAAD;AAAA,WAAUF,IAAI,CAAC,SAAD,EAAYE,IAAZ,CAAd;AAAA,GAFyD;AAGlEa,EAAAA,KAAK,EAAE,eAACb,IAAD;AAAA,WAAUF,IAAI,CAAC,OAAD,EAAUE,IAAV,CAAd;AAAA;AAH2D,CAApE;eAMeU,O","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport { AlertProps } from '../Alert';\nimport {\n containerStyles,\n messageContainerStyles,\n setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n if (!containerElement) {\n containerElement = document.createElement('div');\n setStylesToHtmlElement(containerElement, containerStyles);\n document.body.appendChild(containerElement);\n }\n return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n if (!containerElement || containerElement.hasChildNodes()) return;\n document.body.removeChild(containerElement);\n containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n // Create a new container for the message\n const container = getContainer();\n const messageContainer = document.createElement('div');\n setStylesToHtmlElement(messageContainer, messageContainerStyles);\n container.appendChild(messageContainer);\n\n // Render the message element\n const messageElement = <Message type={type} text={text} />;\n ReactDOM.render(messageElement, messageContainer);\n\n // Delete the message container after N ms\n setTimeout(() => {\n ReactDOM.unmountComponentAtNode(messageContainer);\n container.removeChild(messageContainer);\n deleteContainerIfNoChildNodes();\n }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n info: (text) => send('info', text),\n success: (text) => send('success', text),\n error: (text) => send('error', text),\n};\n\nexport default message;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["containerElement","getContainer","document","createElement","setStylesToHtmlElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","ReactDOM","render","setTimeout","unmountComponentAtNode","MESSAGE_DURATION_MS","message","info","success","error"],"sources":["../../../src/message/index.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport { AlertProps } from '../Alert';\nimport {\n containerStyles,\n messageContainerStyles,\n setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n if (!containerElement) {\n containerElement = document.createElement('div');\n setStylesToHtmlElement(containerElement, containerStyles);\n document.body.appendChild(containerElement);\n }\n return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n if (!containerElement || containerElement.hasChildNodes()) return;\n document.body.removeChild(containerElement);\n containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n // Create a new container for the message\n const container = getContainer();\n const messageContainer = document.createElement('div');\n setStylesToHtmlElement(messageContainer, messageContainerStyles);\n container.appendChild(messageContainer);\n\n // Render the message element\n const messageElement = <Message type={type} text={text} />;\n ReactDOM.render(messageElement, messageContainer);\n\n // Delete the message container after N ms\n setTimeout(() => {\n ReactDOM.unmountComponentAtNode(messageContainer);\n container.removeChild(messageContainer);\n deleteContainerIfNoChildNodes();\n }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n info: (text) => send('info', text),\n success: (text) => send('success', text),\n error: (text) => send('error', text),\n};\n\nexport default message;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAMA,IAAIA,gBAAJ;AAEA;AACA;AACA;;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;EACzB,IAAI,CAACD,gBAAL,EAAuB;IACrBA,gBAAgB,GAAGE,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;IACA,IAAAC,8BAAA,EAAuBJ,gBAAvB,EAAyCK,uBAAzC;IACAH,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BP,gBAA1B;EACD;;EACD,OAAOA,gBAAP;AACD,CAPD;AASA;AACA;AACA;;;AACA,IAAMQ,6BAA6B,GAAG,SAAhCA,6BAAgC,GAAM;EAC1C,IAAI,CAACR,gBAAD,IAAqBA,gBAAgB,CAACS,aAAjB,EAAzB,EAA2D;EAC3DP,QAAQ,CAACI,IAAT,CAAcI,WAAd,CAA0BV,gBAA1B;EACAA,gBAAgB,GAAG,IAAnB;AACD,CAJD;AAMA;AACA;AACA;;;AACA,IAAMW,IAAI,GAAG,SAAPA,IAAO,CAACC,IAAD,EAA2BC,IAA3B,EAA4C;EACvD;EACA,IAAMC,SAAS,GAAGb,YAAY,EAA9B;EACA,IAAMc,gBAAgB,GAAGb,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAzB;EACA,IAAAC,8BAAA,EAAuBW,gBAAvB,EAAyCC,8BAAzC;EACAF,SAAS,CAACP,WAAV,CAAsBQ,gBAAtB,EALuD,CAOvD;;EACA,IAAME,cAAc,gBAAG,gCAAC,mBAAD;IAAS,IAAI,EAAEL,IAAf;IAAqB,IAAI,EAAEC;EAA3B,EAAvB;;EACAK,oBAAA,CAASC,MAAT,CAAgBF,cAAhB,EAAgCF,gBAAhC,EATuD,CAWvD;;;EACAK,UAAU,CAAC,YAAM;IACfF,oBAAA,CAASG,sBAAT,CAAgCN,gBAAhC;;IACAD,SAAS,CAACJ,WAAV,CAAsBK,gBAAtB;IACAP,6BAA6B;EAC9B,CAJS,EAIPc,4BAJO,CAAV;AAKD,CAjBD;;AAmBA,IAAMC,OAA2D,GAAG;EAClEC,IAAI,EAAE,cAACX,IAAD;IAAA,OAAUF,IAAI,CAAC,MAAD,EAASE,IAAT,CAAd;EAAA,CAD4D;EAElEY,OAAO,EAAE,iBAACZ,IAAD;IAAA,OAAUF,IAAI,CAAC,SAAD,EAAYE,IAAZ,CAAd;EAAA,CAFyD;EAGlEa,KAAK,EAAE,eAACb,IAAD;IAAA,OAAUF,IAAI,CAAC,OAAD,EAAUE,IAAV,CAAd;EAAA;AAH2D,CAApE;eAMeU,O"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/message/styles.ts"],"names":["containerStyles","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","key","value","style"],"mappings":";;;;;;;;;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAG;AAC3DC,EAAAA,QAAQ,EAAE,OADiD;AAE3DC,EAAAA,GAAG,EAAE,GAFsD;AAG3DC,EAAAA,IAAI,EAAE,GAHqD;AAI3DC,EAAAA,KAAK,EAAE,GAJoD;AAK3DC,EAAAA,MAAM,EAAE,MALmD;AAM3DC,EAAAA,aAAa,EAAE,MAN4C;AAO3DC,EAAAA,OAAO,EAAE,MAPkD;AAQ3DC,EAAAA,aAAa,EAAE;AAR4C,CAAtD;;AAWA,IAAMC,sBAAoD,GAAG;AAClEF,EAAAA,OAAO,EAAE,MADyD;AAElEG,EAAAA,cAAc,EAAE;AAFkD,CAA7D;;;AAKA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CACpCC,OADoC,EAEpCC,MAFoC,EAG3B;AACTC,EAAAA,MAAM,CAACC,OAAP,CAAeF,MAAf,EAAuBG,OAAvB,CAA+B,gBAAkB;AAAA;AAAA,QAAhBC,GAAgB;AAAA,QAAXC,KAAW;;AAC/C;AACAN,IAAAA,OAAO,CAACO,KAAR,CAAcF,GAAd,IAAqBC,KAArB;AACD,GAHD;AAID,CARM","sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n zIndex: '1001',\n pointerEvents: 'none',\n display: 'flex',\n flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n display: 'flex',\n justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n element: HTMLElement,\n styles: Partial<CSSStyleDeclaration>\n): void => {\n Object.entries(styles).forEach(([key, value]) => {\n // eslint-disable-next-line no-param-reassign\n element.style[key] = value;\n });\n};\n"],"file":"styles.js"}
1
+ {"version":3,"file":"styles.js","names":["containerStyles","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","key","value","style"],"sources":["../../../src/message/styles.ts"],"sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n position: 'fixed',\n top: '0',\n left: '0',\n right: '0',\n zIndex: '1001',\n pointerEvents: 'none',\n display: 'flex',\n flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n display: 'flex',\n justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n element: HTMLElement,\n styles: Partial<CSSStyleDeclaration>\n): void => {\n Object.entries(styles).forEach(([key, value]) => {\n // eslint-disable-next-line no-param-reassign\n element.style[key] = value;\n });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAG;EAC3DC,QAAQ,EAAE,OADiD;EAE3DC,GAAG,EAAE,GAFsD;EAG3DC,IAAI,EAAE,GAHqD;EAI3DC,KAAK,EAAE,GAJoD;EAK3DC,MAAM,EAAE,MALmD;EAM3DC,aAAa,EAAE,MAN4C;EAO3DC,OAAO,EAAE,MAPkD;EAQ3DC,aAAa,EAAE;AAR4C,CAAtD;;AAWA,IAAMC,sBAAoD,GAAG;EAClEF,OAAO,EAAE,MADyD;EAElEG,cAAc,EAAE;AAFkD,CAA7D;;;AAKA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CACpCC,OADoC,EAEpCC,MAFoC,EAG3B;EACTC,MAAM,CAACC,OAAP,CAAeF,MAAf,EAAuBG,OAAvB,CAA+B,gBAAkB;IAAA;IAAA,IAAhBC,GAAgB;IAAA,IAAXC,KAAW;;IAC/C;IACAN,OAAO,CAACO,KAAR,CAAcF,GAAd,IAAqBC,KAArB;EACD,CAHD;AAID,CARM"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Alert/index.tsx"],"names":["React","forwardRef","useMemo","sizeStyles","omitEmotionProps","clr","CheckCircle","CloseCircle","InfoCircle","styled","css","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n <span>{children}</span>\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","useMemo","sizeStyles","omitEmotionProps","clr","CheckCircle","CloseCircle","InfoCircle","styled","css","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n /**\n * Type of styles.\n */\n type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n background-color: ${clr(p.theme.alertInfoColorBg)};\n `;\n\nconst successContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n background-color: ${clr(p.theme.alertSuccessColorBg)};\n `;\n\nconst errorContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n background-color: ${clr(p.theme.alertErrorColorBg)};\n `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n 'div',\n omitEmotionProps('type', 'size')\n)<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n padding: 1em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${infoContainerStyles};\n ${successContainerStyles};\n ${errorContainerStyles};\n ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n p.type === 'info' &&\n css`\n color: ${clr(p.theme.alertInfoColorIcon)};\n `;\n\nconst successIconContainerStyles = (p) =>\n p.type === 'success' &&\n css`\n color: ${clr(p.theme.alertSuccessColorIcon)};\n `;\n\nconst errorIconContainerStyles = (p) =>\n p.type === 'error' &&\n css`\n color: ${clr(p.theme.alertErrorColorIcon)};\n `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n display: flex;\n align-items: center;\n\n margin-right: 0.3em;\n font-size: 1.4em;\n\n ${infoIconContainerStyles};\n ${successIconContainerStyles};\n ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n info: InfoCircle,\n success: CheckCircle,\n error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n ({ type, size, children, ...rest }, ref) => {\n const Icon = useMemo(() => typeIconMap[type], [type]);\n\n return (\n <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n <IconContainer type={type}>\n <Icon />\n </IconContainer>\n <span>{children}</span>\n </Container>\n );\n }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,WAAT,EAAsBC,WAAtB,EAAmCC,UAAnC,QAAqD,kBAArD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,gBAApB;;AAUA,MAAMC,mBAAmB,GAAIC,CAAD,IAC1BA,CAAC,CAACC,IAAF,KAAW,MAAX,IACAH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQC,gBAAT,CAA2B;AACtD,GAJA;;AAMA,MAAMC,sBAAsB,GAAIJ,CAAD,IAC7BA,CAAC,CAACC,IAAF,KAAW,SAAX,IACAH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQG,mBAAT,CAA8B;AACzD,GAJA;;AAMA,MAAMC,oBAAoB,GAAIN,CAAD,IAC3BA,CAAC,CAACC,IAAF,KAAW,OAAX,IACAH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQK,iBAAT,CAA4B;AACvD,GAJA;;AAOA,MAAMC,SAAS,GAAGX,MAAM,CACtB,KADsB,EAEtBL,gBAAgB,CAAC,MAAD,EAAS,MAAT,CAFM,CAGN;AAClB;AACA;AACA;AACA;AACA;AACA,mBAAoBQ,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQO,YAAa;AAC/C,WAAYT,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQQ,SAAT,CAAoB;AACzC;AACA,IAAIX,mBAAoB;AACxB,IAAIK,sBAAuB;AAC3B,IAAIE,oBAAqB;AACzB,IAAIf,UAAW;AACf,CAhBA;;AAkBA,MAAMoB,uBAAuB,GAAIX,CAAD,IAC9BA,CAAC,CAACC,IAAF,KAAW,MAAX,IACAH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQU,kBAAT,CAA6B;AAC7C,GAJA;;AAMA,MAAMC,0BAA0B,GAAIb,CAAD,IACjCA,CAAC,CAACC,IAAF,KAAW,SAAX,IACAH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQY,qBAAT,CAAgC;AAChD,GAJA;;AAMA,MAAMC,wBAAwB,GAAIf,CAAD,IAC/BA,CAAC,CAACC,IAAF,KAAW,OAAX,IACAH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAF,CAAQc,mBAAT,CAA8B;AAC9C,GAJA;;AAOA,MAAMC,aAAa,GAAGpB,MAAM,CAAC,GAAD,EAAML,gBAAgB,CAAC,MAAD,CAAtB,CAAoD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,IAAImB,uBAAwB;AAC5B,IAAIE,0BAA2B;AAC/B,IAAIE,wBAAyB;AAC7B,CAVA;AAYA,MAAMG,WAAW,GAAG;EAClBC,IAAI,EAAEvB,UADY;EAElBwB,OAAO,EAAE1B,WAFS;EAGlB2B,KAAK,EAAE1B;AAHW,CAApB;AAMA;AACA;AACA;;AACA,MAAM2B,KAAK,gBAAGjC,UAAU,CACtB,CAAC;EAAEY,IAAF;EAAQsB,IAAR;EAAcC,QAAd;EAAwB,GAAGC;AAA3B,CAAD,EAAoCC,GAApC,KAA4C;EAC1C,MAAMC,IAAI,GAAGrC,OAAO,CAAC,MAAM4B,WAAW,CAACjB,IAAD,CAAlB,EAA0B,CAACA,IAAD,CAA1B,CAApB;EAEA,oBACE,oBAAC,SAAD;IAAW,IAAI,EAAEsB,IAAjB;IAAuB,IAAI,EAAEtB,IAA7B;IAAmC,IAAI,EAAC;EAAxC,GAAoDwB,IAApD;IAA0D,GAAG,EAAEC;EAA/D,iBACE,oBAAC,aAAD;IAAe,IAAI,EAAEzB;EAArB,gBACE,oBAAC,IAAD,OADF,CADF,eAIE,kCAAOuB,QAAP,CAJF,CADF;AAQD,CAZqB,CAAxB;AAeAF,KAAK,CAACM,WAAN,GAAoB,OAApB;AAEA,eAAeN,KAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Avatar/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","styled","User","sizeStyles","omitEmotionProps","clr","useTheme","nameToInitials","strToHue","Image","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","initials","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, useTheme } from '@os-design/theming';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\nimport Image, { ImageProps } from '../Image';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return <UserIcon />;\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {renderChildren()}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","styled","User","sizeStyles","omitEmotionProps","clr","useTheme","nameToInitials","strToHue","Image","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","initials","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, useTheme } from '@os-design/theming';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\nimport Image, { ImageProps } from '../Image';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n /**\n * Used to render the first letter if the image URL is not specified.\n * @default undefined\n */\n firstName?: string;\n /**\n * Used to render the second letter if the image URL is not specified.\n * @default undefined\n */\n lastName?: string;\n /**\n * The URL of the image.\n * @default undefined\n */\n image?: string;\n /**\n * The props of the image.\n * @default undefined\n */\n imageProps?: Omit<ImageProps, 'url'>;\n /**\n * Whether the user is online.\n * @default false\n */\n online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n position: relative;\n width: 1em;\n height: 1em;\n min-width: 1em;\n min-height: 1em;\n ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n 'div',\n omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n width: 100%;\n height: 100%;\n border-radius: ${(p) => p.theme.borderRadius}em;\n\n font-weight: 500;\n line-height: 1;\n\n color: hsl(0, 0%, 100%);\n background-color: ${(p) => clr(p.bgColor)};\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n white-space: nowrap; // To disable multiline text\n overflow: hidden; // To trim the image corners\n\n ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n position: absolute;\n right: -0.05em;\n bottom: -0.05em;\n width: ${OUTER_SIZE}em;\n height: ${OUTER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n &::before {\n content: '';\n position: absolute;\n left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n width: ${INNER_SIZE}em;\n height: ${INNER_SIZE}em;\n border-radius: 50%;\n background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n firstName,\n lastName,\n image,\n imageProps = {},\n online = false,\n size = '2em',\n ...rest\n },\n ref\n ) => {\n const { theme } = useTheme();\n\n const bgColor = useMemo<Color>(() => {\n const parts: string[] = [];\n if (firstName) parts.push(firstName);\n if (lastName) parts.push(lastName);\n if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n return theme.avatarDefaultColorBg;\n }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n const fullName = useMemo(\n () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n [firstName, lastName]\n );\n\n const renderChildren = useCallback(() => {\n // Render the image if the image property was specified\n if (image) return <Image url={image} cropped {...imageProps} />;\n\n // Render the initials of the name if either firstName or lastName was specified\n const initials = nameToInitials({ firstName, lastName });\n if (initials) return <Initials>{initials}</Initials>;\n\n // Otherwise render the user icon\n return <UserIcon />;\n }, [image, imageProps, firstName, lastName]);\n\n return (\n <Container size={size}>\n <AvatarContainer\n bgColor={bgColor}\n role='img'\n aria-label={fullName || 'User'}\n {...rest}\n ref={ref}\n >\n {renderChildren()}\n </AvatarContainer>\n {online && <Online />}\n </Container>\n );\n }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"mappings":"AAKA,MAAMA,cAAc,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAD,KAA2C;AAChE,QAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAV,CAAiB,CAAjB,CAAH,GAAyB,EAAhD;AACA,QAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAH,GAAwB,EAA/C;AACA,SAAQ,GAAED,KAAM,GAAEE,MAAO,EAAlB,CAAoBC,WAApB,EAAP;AACD,CAJD;;AAMA,eAAeN,cAAf","sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"file":"nameToInitials.js"}
1
+ {"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n firstName?: string;\n lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n const first = firstName ? firstName.charAt(0) : '';\n const second = lastName ? lastName.charAt(0) : '';\n return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAG,CAAC;EAAEC,SAAF;EAAaC;AAAb,CAAD,KAA2C;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAV,CAAiB,CAAjB,CAAH,GAAyB,EAAhD;EACA,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAH,GAAwB,EAA/C;EACA,OAAQ,GAAED,KAAM,GAAEE,MAAO,EAAlB,CAAoBC,WAApB,EAAP;AACD,CAJD;;AAMA,eAAeN,cAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/Avatar/utils/strToHue.ts"],"names":["strToHue","str","hash","i","length","charCodeAt"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAD,IAAyB;AACxC,MAAIC,IAAI,GAAG,CAAX;;AACA,OAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,GAAG,CAACG,MAAxB,EAAgCD,CAAC,IAAI,CAArC,EAAwC;AACtC;AACAD,IAAAA,IAAI,GAAGD,GAAG,CAACI,UAAJ,CAAeF,CAAf,KAAqB,CAACD,IAAI,IAAI,CAAT,IAAcA,IAAnC,CAAP;AACD;;AACD,SAAOA,IAAI,GAAG,GAAd;AACD,CAPD;;AASA,eAAeF,QAAf","sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n let hash = 0;\n for (let i = 0; i < str.length; i += 1) {\n // eslint-disable-next-line no-bitwise\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n return hash % 360;\n};\n\nexport default strToHue;\n"],"file":"strToHue.js"}
1
+ {"version":3,"file":"strToHue.js","names":["strToHue","str","hash","i","length","charCodeAt"],"sources":["../../../../src/Avatar/utils/strToHue.ts"],"sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n let hash = 0;\n for (let i = 0; i < str.length; i += 1) {\n // eslint-disable-next-line no-bitwise\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n return hash % 360;\n};\n\nexport default strToHue;\n"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAD,IAAyB;EACxC,IAAIC,IAAI,GAAG,CAAX;;EACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,GAAG,CAACG,MAAxB,EAAgCD,CAAC,IAAI,CAArC,EAAwC;IACtC;IACAD,IAAI,GAAGD,GAAG,CAACI,UAAJ,CAAeF,CAAf,KAAqB,CAACD,IAAI,IAAI,CAAT,IAAcA,IAAnC,CAAP;EACD;;EACD,OAAOA,IAAI,GAAG,GAAd;AACD,CAPD;;AASA,eAAeF,QAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/AvatarSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","Container","AvatarSkeleton","size","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE,IAAID,UAAW;AACf,CAFA;AAIA;AACA;AACA;;AACA,MAAMI,cAAc,gBAAGL,UAAU,CAC/B,CAAC;AAAEM,EAAAA,IAAI,GAAG,KAAT;AAAgB,KAAGC;AAAnB,CAAD,EAA4BC,GAA5B,kBACE,oBAAC,SAAD;AAAW,EAAA,IAAI,EAAEF;AAAjB,GAA2BC,IAA3B;AAAiC,EAAA,GAAG,EAAEC;AAAtC,iBACE,oBAAC,QAAD;AAAU,EAAA,KAAK,EAAC;AAAhB,EADF,CAF6B,CAAjC;AAQAH,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,eAAeJ,cAAf","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","Container","AvatarSkeleton","size","rest","ref","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n ({ size = '2em', ...rest }, ref) => (\n <Container size={size} {...rest} ref={ref}>\n <Skeleton width='1em' />\n </Container>\n )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE,IAAID,UAAW;AACf,CAFA;AAIA;AACA;AACA;;AACA,MAAMI,cAAc,gBAAGL,UAAU,CAC/B,CAAC;EAAEM,IAAI,GAAG,KAAT;EAAgB,GAAGC;AAAnB,CAAD,EAA4BC,GAA5B,kBACE,oBAAC,SAAD;EAAW,IAAI,EAAEF;AAAjB,GAA2BC,IAA3B;EAAiC,GAAG,EAAEC;AAAtC,iBACE,oBAAC,QAAD;EAAU,KAAK,EAAC;AAAhB,EADF,CAF6B,CAAjC;AAQAH,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,eAAeJ,cAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Breadcrumb/index.tsx"],"names":["React","forwardRef","useMemo","styled","enableScrollingStyles","sizeStyles","omitEmotionProps","clr","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","enableScrollingStyles","sizeStyles","omitEmotionProps","clr","BreadcrumbItem","Container","p","theme","colorText","childIndex","Breadcrumb","ariaLabel","children","rest","ref","breadcrumbItems","items","childrenArray","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","cloneElement","props","breadcrumbItem","push","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n 'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n align-items: center;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${enableScrollingStyles('x', false)};\n ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n const breadcrumbItems = useMemo(() => {\n const items: ReactElement[] = [];\n const childrenArray = React.Children.toArray(children);\n childrenArray.forEach((child, index) => {\n if (!React.isValidElement(child)) return;\n\n let element;\n const breadcrumbItemProps = {\n key: childIndex,\n position: index + 1,\n hasRightArrow: index < childrenArray.length - 1,\n };\n\n if (child.type === BreadcrumbItem) {\n element = React.cloneElement(child, breadcrumbItemProps);\n } else if (\n React.isValidElement(child.props.children) &&\n child.props.children.type === BreadcrumbItem\n ) {\n const breadcrumbItem = React.cloneElement(\n child.props.children,\n breadcrumbItemProps\n );\n element = React.cloneElement(\n child,\n {\n ...(child.props || {}),\n key: childIndex,\n },\n breadcrumbItem\n );\n }\n if (!element) return;\n\n items.push(element);\n childIndex += 1;\n });\n return items;\n }, [children]);\n\n if (breadcrumbItems.length === 0) return null;\n\n return (\n <nav aria-label={ariaLabel}>\n <Container\n itemScope\n itemType='https://schema.org/BreadcrumbList'\n {...rest}\n ref={ref}\n >\n {breadcrumbItems}\n </Container>\n </nav>\n );\n }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA0CC,OAA1C,QAAyD,OAAzD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,qBAAT,EAAgCC,UAAhC,QAA4D,mBAA5D;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AAOA,MAAMC,SAAS,GAAGN,MAAM,CAAC,IAAD,EAAOG,gBAAgB,CAAC,MAAD,CAAvB,CAA2C;AACnE;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA,IAAIR,qBAAqB,CAAC,GAAD,EAAM,KAAN,CAAa;AACtC,IAAIC,UAAW;AACf,CAVA;AAYA,IAAIQ,UAAU,GAAG,CAAjB;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,gBAAGb,UAAU,CAC3B,CAAC;EAAE,cAAcc,SAAS,GAAG,YAA5B;EAA0CC,QAA1C;EAAoD,GAAGC;AAAvD,CAAD,EAAgEC,GAAhE,KAAwE;EACtE,MAAMC,eAAe,GAAGjB,OAAO,CAAC,MAAM;IACpC,MAAMkB,KAAqB,GAAG,EAA9B;IACA,MAAMC,aAAa,GAAGrB,KAAK,CAACsB,QAAN,CAAeC,OAAf,CAAuBP,QAAvB,CAAtB;IACAK,aAAa,CAACG,OAAd,CAAsB,CAACC,KAAD,EAAQC,KAAR,KAAkB;MACtC,IAAI,eAAC1B,KAAK,CAAC2B,cAAN,CAAqBF,KAArB,CAAL,EAAkC;MAElC,IAAIG,OAAJ;MACA,MAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEjB,UADqB;QAE1BkB,QAAQ,EAAEL,KAAK,GAAG,CAFQ;QAG1BM,aAAa,EAAEN,KAAK,GAAGL,aAAa,CAACY,MAAd,GAAuB;MAHpB,CAA5B;;MAMA,IAAIR,KAAK,CAACS,IAAN,KAAe1B,cAAnB,EAAmC;QACjCoB,OAAO,gBAAG5B,KAAK,CAACmC,YAAN,CAAmBV,KAAnB,EAA0BI,mBAA1B,CAAV;MACD,CAFD,MAEO,IACL,cAAA7B,KAAK,CAAC2B,cAAN,CAAqBF,KAAK,CAACW,KAAN,CAAYpB,QAAjC,KACAS,KAAK,CAACW,KAAN,CAAYpB,QAAZ,CAAqBkB,IAArB,KAA8B1B,cAFzB,EAGL;QACA,MAAM6B,cAAc,gBAAGrC,KAAK,CAACmC,YAAN,CACrBV,KAAK,CAACW,KAAN,CAAYpB,QADS,EAErBa,mBAFqB,CAAvB;QAIAD,OAAO,gBAAG5B,KAAK,CAACmC,YAAN,CACRV,KADQ,EAER,EACE,IAAIA,KAAK,CAACW,KAAN,IAAe,EAAnB,CADF;UAEEN,GAAG,EAAEjB;QAFP,CAFQ,EAMRwB,cANQ,CAAV;MAQD;;MACD,IAAI,CAACT,OAAL,EAAc;MAEdR,KAAK,CAACkB,IAAN,CAAWV,OAAX;MACAf,UAAU,IAAI,CAAd;IACD,CAjCD;IAkCA,OAAOO,KAAP;EACD,CAtC8B,EAsC5B,CAACJ,QAAD,CAtC4B,CAA/B;EAwCA,IAAIG,eAAe,CAACc,MAAhB,KAA2B,CAA/B,EAAkC,OAAO,IAAP;EAElC,oBACE;IAAK,cAAYlB;EAAjB,gBACE,oBAAC,SAAD;IACE,SAAS,MADX;IAEE,QAAQ,EAAC;EAFX,GAGME,IAHN;IAIE,GAAG,EAAEC;EAJP,IAMGC,eANH,CADF,CADF;AAYD,CAxD0B,CAA7B;AA2DAL,UAAU,CAACyB,WAAX,GAAyB,YAAzB;AAEA,eAAezB,UAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/BreadcrumbItem/index.tsx"],"names":["React","forwardRef","styled","ellipsisStyles","Right","clr","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","underline","toString","displayName"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,IAAP,MAAgC,SAAhC;AAoBA,MAAMC,SAAS,GAAGL,MAAM,CAACM,EAAG;AAC5B;AACA,CAFA;AAIA,MAAMC,IAAI,GAAGP,MAAM,CAACQ,IAAK;AACzB;AACA,IAAIP,cAAe;AACnB,CAHA;AAKA,MAAMQ,SAAS,GAAGT,MAAM,CAACE,KAAD,CAAQ;AAChC,WAAYQ,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA;AACA;AACA,CALA;AAOA;AACA;AACA;;AACA,MAAMC,cAAc,gBAAGd,UAAU,CAC/B,CACE;AACEe,EAAAA,WAAW,GAAG,KADhB;AAEEC,EAAAA,aAAa,GAAG,KAFlB;AAGEC,EAAAA,QAHF;AAIEC,EAAAA,IAJF;AAKEC,EAAAA,QALF;AAME,KAAGC;AANL,CADF,EASEC,GATF,kBAWE,oBAAC,SAAD,qBACE,oBAAC,IAAD;AACE,EAAA,QAAQ,EAAC,iBADX;AAEE,EAAA,SAAS,MAFX;AAGE,EAAA,QAAQ,EAAC,6BAHX;AAIE,EAAA,IAAI,EAAEH;AAJR,GAKOH,WAAW,GACZ;AACEO,EAAAA,SAAS,EAAE,QADb;AAEE,kBAAgB;AAFlB,CADY,GAKZ,EAVN,EAWMF,IAXN;AAYE,EAAA,GAAG,EAAEC;AAZP,iBAcE;AAAM,EAAA,QAAQ,EAAC,MAAf;AAAsB,EAAA,IAAI,EAAEH;AAA5B,EAdF,EAeGD,QAAQ,iBAAI;AAAM,EAAA,QAAQ,EAAC,UAAf;AAA0B,EAAA,OAAO,EAAEA,QAAQ,CAACM,QAAT;AAAnC,EAff,eAgBE,oBAAC,IAAD;AAAM,EAAA,QAAQ,EAAC;AAAf,GAAuBJ,QAAvB,CAhBF,CADF,EAmBGH,aAAa,iBAAI,oBAAC,SAAD;AAAW,EAAA,IAAI,EAAC;AAAhB,EAnBpB,CAZ6B,CAAjC;AAoCAF,cAAc,CAACU,WAAf,GAA6B,gBAA7B;AAEA,eAAeV,cAAf","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","Right","clr","Link","Container","li","Name","span","RightIcon","p","theme","colorText","BreadcrumbItem","currentPage","hasRightArrow","position","href","children","rest","ref","underline","toString","displayName"],"sources":["../../../src/BreadcrumbItem/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport Link, { LinkProps } from '../Link';\n\nexport interface BreadcrumbItemProps extends LinkProps {\n /**\n * Whether the item is the current page.\n * @default false\n */\n currentPage?: boolean;\n /**\n * Whether the right arrow located to the right of the text is visible.\n * @default false\n */\n hasRightArrow?: boolean;\n /**\n * The position of the breadcrumb item.\n * @default undefined\n */\n position?: number;\n}\n\nconst Container = styled.li`\n list-style: none;\n`;\n\nconst Name = styled.span`\n max-width: 20em;\n ${ellipsisStyles};\n`;\n\nconst RightIcon = styled(Right)`\n color: ${(p) => clr(p.theme.colorText)};\n margin: 0 0.6em;\n font-size: 0.6em;\n opacity: 0.8;\n`;\n\n/**\n * The item of the breadcrumb.\n */\nconst BreadcrumbItem = forwardRef<HTMLAnchorElement, BreadcrumbItemProps>(\n (\n {\n currentPage = false,\n hasRightArrow = false,\n position,\n href,\n children,\n ...rest\n },\n ref\n ) => (\n <Container>\n <Link\n itemProp='itemListElement'\n itemScope\n itemType='https://schema.org/ListItem'\n href={href}\n {...(currentPage\n ? {\n underline: 'always',\n 'aria-current': 'page',\n }\n : {})}\n {...rest}\n ref={ref}\n >\n <link itemProp='item' href={href} />\n {position && <meta itemProp='position' content={position.toString()} />}\n <Name itemProp='name'>{children}</Name>\n </Link>\n {hasRightArrow && <RightIcon role='presentation' />}\n </Container>\n )\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n\nexport default BreadcrumbItem;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,IAAP,MAAgC,SAAhC;AAoBA,MAAMC,SAAS,GAAGL,MAAM,CAACM,EAAG;AAC5B;AACA,CAFA;AAIA,MAAMC,IAAI,GAAGP,MAAM,CAACQ,IAAK;AACzB;AACA,IAAIP,cAAe;AACnB,CAHA;AAKA,MAAMQ,SAAS,GAAGT,MAAM,CAACE,KAAD,CAAQ;AAChC,WAAYQ,CAAD,IAAOP,GAAG,CAACO,CAAC,CAACC,KAAF,CAAQC,SAAT,CAAoB;AACzC;AACA;AACA;AACA,CALA;AAOA;AACA;AACA;;AACA,MAAMC,cAAc,gBAAGd,UAAU,CAC/B,CACE;EACEe,WAAW,GAAG,KADhB;EAEEC,aAAa,GAAG,KAFlB;EAGEC,QAHF;EAIEC,IAJF;EAKEC,QALF;EAME,GAAGC;AANL,CADF,EASEC,GATF,kBAWE,oBAAC,SAAD,qBACE,oBAAC,IAAD;EACE,QAAQ,EAAC,iBADX;EAEE,SAAS,MAFX;EAGE,QAAQ,EAAC,6BAHX;EAIE,IAAI,EAAEH;AAJR,GAKOH,WAAW,GACZ;EACEO,SAAS,EAAE,QADb;EAEE,gBAAgB;AAFlB,CADY,GAKZ,EAVN,EAWMF,IAXN;EAYE,GAAG,EAAEC;AAZP,iBAcE;EAAM,QAAQ,EAAC,MAAf;EAAsB,IAAI,EAAEH;AAA5B,EAdF,EAeGD,QAAQ,iBAAI;EAAM,QAAQ,EAAC,UAAf;EAA0B,OAAO,EAAEA,QAAQ,CAACM,QAAT;AAAnC,EAff,eAgBE,oBAAC,IAAD;EAAM,QAAQ,EAAC;AAAf,GAAuBJ,QAAvB,CAhBF,CADF,EAmBGH,aAAa,iBAAI,oBAAC,SAAD;EAAW,IAAI,EAAC;AAAhB,EAnBpB,CAZ6B,CAAjC;AAoCAF,cAAc,CAACU,WAAf,GAA6B,gBAA7B;AAEA,eAAeV,cAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/ButtonContent.tsx"],"names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;AACnDC,EAAAA,IADmD;AAEnDC,EAAAA,KAFmD;AAGnDC,EAAAA,OAAO,GAAG,KAHyC;AAInDC,EAAAA,aAJmD;AAKnDC,EAAAA;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;AAAkB,EAAA,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf","sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"file":"ButtonContent.js"}
1
+ {"version":3,"file":"ButtonContent.js","names":["React","Loading","styled","keyframes","omitEmotionProps","clr","LeftAddon","div","p","theme","buttonAddonPaddingHorizontal","RightAddon","Content","span","buttonIconScaleFactor","LoadingIcon","loadingFadeIn","LoadingContainer","colors","text","bg","transitionDelay","ButtonContent","left","right","loading","loadingColors","children"],"sources":["../../../src/Button/ButtonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { Loading } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { LoadingColors } from './utils/useButtonColors';\n\ninterface ButtonContentProps {\n left?: React.ReactNode;\n right?: React.ReactNode;\n loading?: boolean;\n loadingColors: LoadingColors;\n children?: React.ReactNode;\n}\n\nconst LeftAddon = styled.div`\n display: inherit;\n padding-right: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n display: inherit;\n padding-left: ${(p) => p.theme.buttonAddonPaddingHorizontal}em;\n`;\n\nconst Content = styled.span`\n display: inherit;\n\n & > svg {\n transform: scale(${(p) => p.theme.buttonIconScaleFactor});\n vertical-align: middle;\n }\n`;\n\nconst LoadingIcon = styled(Loading)`\n font-size: 1.2em;\n`;\n\nconst loadingFadeIn = keyframes`\n from { opacity: 0; }\n to { opacity: 1; }\n`;\n\ninterface LoadingContainerProps {\n colors: LoadingColors;\n}\nconst LoadingContainer = styled(\n 'div',\n omitEmotionProps('colors')\n)<LoadingContainerProps>`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n color: ${(p) => clr(p.colors.text)};\n background-color: ${(p) => clr(p.colors.bg)};\n animation: ${loadingFadeIn} ${(p) => p.theme.transitionDelay}ms;\n`;\n\n// Used by Button, LinkButton\nconst ButtonContent: React.FC<ButtonContentProps> = ({\n left,\n right,\n loading = false,\n loadingColors,\n children,\n}) => (\n <>\n {left && <LeftAddon>{left}</LeftAddon>}\n <Content>{children}</Content>\n {right && <RightAddon>{right}</RightAddon>}\n {loading && (\n <LoadingContainer colors={loadingColors}>\n <LoadingIcon />\n </LoadingContainer>\n )}\n </>\n);\n\nexport default ButtonContent;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAWA,MAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAI;AAC7B;AACA,mBAAoBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC/D,CAHA;AAKA,MAAMC,UAAU,GAAGT,MAAM,CAACK,GAAI;AAC9B;AACA,kBAAmBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,4BAA6B;AAC9D,CAHA;AAKA,MAAME,OAAO,GAAGV,MAAM,CAACW,IAAK;AAC5B;AACA;AACA;AACA,uBAAwBL,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,qBAAsB;AAC5D;AACA;AACA,CAPA;AASA,MAAMC,WAAW,GAAGb,MAAM,CAACD,OAAD,CAAU;AACpC;AACA,CAFA;AAIA,MAAMe,aAAa,GAAGb,SAAU;AAChC;AACA;AACA,CAHA;AAQA,MAAMc,gBAAgB,GAAGf,MAAM,CAC7B,KAD6B,EAE7BE,gBAAgB,CAAC,QAAD,CAFa,CAGN;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAYI,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASC,IAAV,CAAgB;AACrC,sBAAuBX,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACU,MAAF,CAASE,EAAV,CAAc;AAC9C,eAAeJ,aAAc,IAAIR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,eAAgB;AAC/D,CAlBA,C,CAoBA;;AACA,MAAMC,aAA2C,GAAG,CAAC;EACnDC,IADmD;EAEnDC,KAFmD;EAGnDC,OAAO,GAAG,KAHyC;EAInDC,aAJmD;EAKnDC;AALmD,CAAD,kBAOlD,0CACGJ,IAAI,iBAAI,oBAAC,SAAD,QAAYA,IAAZ,CADX,eAEE,oBAAC,OAAD,QAAUI,QAAV,CAFF,EAGGH,KAAK,iBAAI,oBAAC,UAAD,QAAaA,KAAb,CAHZ,EAIGC,OAAO,iBACN,oBAAC,gBAAD;EAAkB,MAAM,EAAEC;AAA1B,gBACE,oBAAC,WAAD,OADF,CALJ,CAPF;;AAmBA,eAAeJ,aAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/index.tsx"],"names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","styled","resetButtonStyles","sizeStyles","transitionStyles","omitEmotionProps","clr","css","m","useButtonColors","ButtonContent","hoverStyles","p","disabled","colors","bgHover","primaryStyles","btnType","text","bg","ghostStyles","outlineStyles","wideDefaultStyles","wide","max","xxs","wideAlwaysStyles","disabledStyles","StyledButton","theme","borderRadius","buttonHeight","buttonPaddingHorizontal","Button","type","danger","left","right","loading","size","children","onMouseDown","rest","ref","buttonColors","loadingColors","e","preventDefault","displayName"],"sources":["../../../src/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n resetButtonStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { m } from '@os-design/media';\nimport useButtonColors, { ButtonColors } from './utils/useButtonColors';\nimport ButtonContent from './ButtonContent';\n\ntype JsxButtonProps = Omit<\n JSX.IntrinsicElements['button'],\n 'type' | 'color' | 'ref'\n>;\n\n// Used by Button, LinkButton\nexport interface BaseButtonProps extends WithSize {\n /**\n * Type of button styles.\n * @default primary\n */\n type?: 'primary' | 'outline' | 'ghost';\n /**\n * Sets the danger styles.\n * @default false\n */\n danger?: boolean;\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Whether the button has full width.\n * Possible values:\n * `default` – the button has full width if the screen width is less than xs;\n * `always` – the button always has full width;\n * `never` – the button never has full width.\n * @default default\n */\n wide?: 'default' | 'always' | 'never';\n /**\n * Shows the loading status and disables the button.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the button is disabled.\n * @default false\n */\n disabled?: boolean;\n}\n\nexport type ButtonProps = JsxButtonProps & BaseButtonProps;\n\ninterface StyledButtonProps\n extends Pick<ButtonProps, 'wide' | 'loading' | 'disabled' | 'size'> {\n btnType: ButtonProps['type'];\n colors: ButtonColors;\n}\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.colors.bgHover)};\n }\n }\n `;\n\nconst primaryStyles = (p) =>\n p.btnType === 'primary' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: ${clr(p.colors.bg)};\n ${hoverStyles(p)};\n `;\n\nconst ghostStyles = (p) =>\n p.btnType === 'ghost' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n ${hoverStyles(p)};\n `;\n\nconst outlineStyles = (p) =>\n p.btnType === 'outline' &&\n css`\n color: ${clr(p.colors.text)};\n background-color: transparent;\n border: 1px solid currentColor;\n ${hoverStyles(p)};\n `;\n\nconst wideDefaultStyles = (p) =>\n p.wide === 'default' &&\n css`\n ${m.max.xxs} {\n width: 100%;\n }\n `;\n\nconst wideAlwaysStyles = (p) =>\n p.wide === 'always' &&\n css`\n width: 100%;\n `;\n\nconst disabledStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\nexport const StyledButton = styled(\n 'button',\n omitEmotionProps('btnType', 'colors', 'wide', 'loading', 'size')\n)<StyledButtonProps>`\n ${resetButtonStyles};\n position: relative; // Because LoadingContainer has an absolute position\n cursor: pointer;\n user-select: none;\n box-sizing: border-box; // Important for LinkButton\n\n // Disable multiline\n white-space: nowrap;\n overflow: hidden;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n height: ${(p) => p.theme.buttonHeight}em;\n padding: 0 ${(p) => p.theme.buttonPaddingHorizontal}em;\n\n // Do not set inline-flex, otherwise the mobile safari cuts off\n // the bottom border of the button (tested in iPhone 6)\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-weight: 500;\n line-height: 1;\n\n ${primaryStyles};\n ${outlineStyles};\n ${ghostStyles};\n\n ${wideDefaultStyles};\n ${wideAlwaysStyles};\n\n ${disabledStyles};\n\n ${sizeStyles};\n ${transitionStyles('background-color', 'color')};\n`;\n\n/**\n * Used to trigger the corresponding business logic.\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n type = 'primary',\n danger = false,\n left,\n right,\n wide = 'default',\n loading = false,\n disabled = false,\n size,\n children,\n onMouseDown = () => {},\n ...rest\n },\n ref\n ) => {\n const { buttonColors, loadingColors } = useButtonColors({\n type,\n danger,\n disabled,\n });\n\n return (\n <StyledButton\n btnType={type}\n colors={buttonColors}\n wide={wide}\n loading={loading}\n disabled={disabled || loading}\n size={size}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n aria-busy={loading}\n {...rest}\n ref={ref}\n >\n <ButtonContent\n left={left}\n right={right}\n loading={loading}\n loadingColors={loadingColors}\n >\n {children}\n </ButtonContent>\n </StyledButton>\n );\n }\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,iBADF,EAEEC,UAFF,EAGEC,gBAHF,QAKO,mBALP;AAMA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,OAAOC,eAAP,MAA8C,yBAA9C;AACA,OAAOC,aAAP,MAA0B,iBAA1B;;AA0DA,MAAMC,WAAW,GAAIC,CAAD,IAClB,CAACA,CAAC,CAACC,QAAH,IACAN,GAAI;AACN;AACA;AACA;AACA,4BAA4BD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASC,OAAV,CAAmB;AAClD;AACA;AACA,GATA;;AAWA,MAAMC,aAAa,GAAIJ,CAAD,IACpBA,CAAC,CAACK,OAAF,KAAc,SAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC,wBAAwBZ,GAAG,CAACM,CAAC,CAACE,MAAF,CAASK,EAAV,CAAc;AACzC,MAAMR,WAAW,CAACC,CAAD,CAAI;AACrB,GANA;;AAQA,MAAMQ,WAAW,GAAIR,CAAD,IAClBA,CAAC,CAACK,OAAF,KAAc,OAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC;AACA,MAAMP,WAAW,CAACC,CAAD,CAAI;AACrB,GANA;;AAQA,MAAMS,aAAa,GAAIT,CAAD,IACpBA,CAAC,CAACK,OAAF,KAAc,SAAd,IACAV,GAAI;AACN,aAAaD,GAAG,CAACM,CAAC,CAACE,MAAF,CAASI,IAAV,CAAgB;AAChC;AACA;AACA,MAAMP,WAAW,CAACC,CAAD,CAAI;AACrB,GAPA;;AASA,MAAMU,iBAAiB,GAAIV,CAAD,IACxBA,CAAC,CAACW,IAAF,KAAW,SAAX,IACAhB,GAAI;AACN,MAAMC,CAAC,CAACgB,GAAF,CAAMC,GAAI;AAChB;AACA;AACA,GANA;;AAQA,MAAMC,gBAAgB,GAAId,CAAD,IACvBA,CAAC,CAACW,IAAF,KAAW,QAAX,IACAhB,GAAI;AACN;AACA,GAJA;;AAMA,MAAMoB,cAAc,GAAIf,CAAD,IACrBA,CAAC,CAACC,QAAF,IACAN,GAAI;AACN;AACA,GAJA;;AAMA,OAAO,MAAMqB,YAAY,GAAG3B,MAAM,CAChC,QADgC,EAEhCI,gBAAgB,CAAC,SAAD,EAAY,QAAZ,EAAsB,MAAtB,EAA8B,SAA9B,EAAyC,MAAzC,CAFgB,CAGb;AACrB,IAAIH,iBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAoBU,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQC,YAAa;AAC/C,YAAalB,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQE,YAAa;AACxC,eAAgBnB,CAAD,IAAOA,CAAC,CAACiB,KAAF,CAAQG,uBAAwB;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIhB,aAAc;AAClB,IAAIK,aAAc;AAClB,IAAID,WAAY;AAChB;AACA,IAAIE,iBAAkB;AACtB,IAAII,gBAAiB;AACrB;AACA,IAAIC,cAAe;AACnB;AACA,IAAIxB,UAAW;AACf,IAAIC,gBAAgB,CAAC,kBAAD,EAAqB,OAArB,CAA8B;AAClD,CAtCO;AAwCP;AACA;AACA;;AACA,MAAM6B,MAAM,gBAAGjC,UAAU,CACvB,CACE;EACEkC,IAAI,GAAG,SADT;EAEEC,MAAM,GAAG,KAFX;EAGEC,IAHF;EAIEC,KAJF;EAKEd,IAAI,GAAG,SALT;EAMEe,OAAO,GAAG,KANZ;EAOEzB,QAAQ,GAAG,KAPb;EAQE0B,IARF;EASEC,QATF;EAUEC,WAAW,GAAG,MAAM,CAAE,CAVxB;EAWE,GAAGC;AAXL,CADF,EAcEC,GAdF,KAeK;EACH,MAAM;IAAEC,YAAF;IAAgBC;EAAhB,IAAkCpC,eAAe,CAAC;IACtDyB,IADsD;IAEtDC,MAFsD;IAGtDtB;EAHsD,CAAD,CAAvD;EAMA,oBACE,oBAAC,YAAD;IACE,OAAO,EAAEqB,IADX;IAEE,MAAM,EAAEU,YAFV;IAGE,IAAI,EAAErB,IAHR;IAIE,OAAO,EAAEe,OAJX;IAKE,QAAQ,EAAEzB,QAAQ,IAAIyB,OALxB;IAME,IAAI,EAAEC,IANR;IAOE,WAAW,EAAGO,CAAD,IAAO;MAClBL,WAAW,CAACK,CAAD,CAAX;MACAA,CAAC,CAACC,cAAF;IACD,CAVH;IAWE,aAAWT;EAXb,GAYMI,IAZN;IAaE,GAAG,EAAEC;EAbP,iBAeE,oBAAC,aAAD;IACE,IAAI,EAAEP,IADR;IAEE,KAAK,EAAEC,KAFT;IAGE,OAAO,EAAEC,OAHX;IAIE,aAAa,EAAEO;EAJjB,GAMGL,QANH,CAfF,CADF;AA0BD,CAjDsB,CAAzB;AAoDAP,MAAM,CAACe,WAAP,GAAqB,QAArB;AAEA,eAAef,MAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/Button/utils/useButtonColors.ts"],"names":["useMemo","useTheme","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAAgBC,QAAhB,QAAgC,oBAAhC;;AAwBA;AACA,MAAMC,eAAe,GAAG,CAAC;AACvBC,EAAAA,IADuB;AAEvBC,EAAAA,MAFuB;AAGvBC,EAAAA;AAHuB,CAAD,KAIS;AAC/B,QAAM;AAAEC,IAAAA;AAAF,MAAYL,QAAQ,EAA1B;AAEA,QAAMM,MAAM,GAAGP,OAAO,CAAS,MAAM;AACnC,QAAII,MAAJ,EAAY,OAAO,QAAP;AACZ,WAAO,EAAP;AACD,GAHqB,EAGnB,CAACA,MAAD,CAHmB,CAAtB;AAKA,QAAMI,YAAY,GAAGR,OAAO,CAAe,MAAM;AAC/C,QAAIG,IAAI,KAAK,SAAb,EAAwB;AACtB,aAAO,CAACE,QAAD,GACH;AACEI,QAAAA,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAjB,CADb;AAEEG,QAAAA,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CAFX;AAGEI,QAAAA,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAjB;AAHhB,OADG,GAMH;AACEE,QAAAA,IAAI,EAAEH,KAAK,CAACM,8BADd;AAEEF,QAAAA,EAAE,EAAEJ,KAAK,CAACO;AAFZ,OANJ;AAUD;;AACD,WAAO,CAACR,QAAD,GACH;AACEI,MAAAA,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CADb;AAEEI,MAAAA,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAjB;AAFhB,KADG,GAKH;AACEE,MAAAA,IAAI,EAAEH,KAAK,CAACQ;AADd,KALJ;AAQD,GArB2B,EAqBzB,CAACX,IAAD,EAAOE,QAAP,EAAiBC,KAAjB,EAAwBC,MAAxB,CArByB,CAA5B;AAuBA,QAAMQ,aAAa,GAAGf,OAAO,CAAgB,MAAM;AACjD,QAAIK,QAAJ,EAAc;AACZ,aAAO;AACLI,QAAAA,IAAI,EAAEH,KAAK,CAACM,8BADP;AAELF,QAAAA,EAAE,EAAEJ,KAAK,CAACO;AAFL,OAAP;AAID;;AACD,QAAIV,IAAI,KAAK,SAAb,EAAwB;AACtB,aAAO;AACLM,QAAAA,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAjB,CADN;AAELG,QAAAA,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAjB;AAFJ,OAAP;AAID;;AACD,WAAO;AACLE,MAAAA,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAjB,CADN;AAELG,MAAAA,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAjB;AAFJ,KAAP;AAID,GAjB4B,EAiB1B,CAACF,QAAD,EAAWF,IAAX,EAAiBG,KAAjB,EAAwBC,MAAxB,CAjB0B,CAA7B;AAmBA,SAAO;AAAEC,IAAAA,YAAF;AAAgBO,IAAAA;AAAhB,GAAP;AACD,CAvDD;;AAyDA,eAAeb,eAAf","sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"file":"useButtonColors.js"}
1
+ {"version":3,"file":"useButtonColors.js","names":["useMemo","useTheme","useButtonColors","type","danger","disabled","theme","prefix","buttonColors","text","bg","bgHover","buttonDisabledPrimaryColorText","buttonDisabledPrimaryColorBg","buttonDisabledGhostColorText","loadingColors"],"sources":["../../../../src/Button/utils/useButtonColors.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { Color, useTheme } from '@os-design/theming';\n\ninterface Props {\n type: 'primary' | 'outline' | 'ghost';\n danger: boolean;\n disabled: boolean;\n}\n\nexport interface ButtonColors {\n text: Color;\n bg?: Color;\n bgHover?: Color;\n}\n\nexport interface LoadingColors {\n text: Color;\n bg: Color;\n}\n\ninterface UseButtonColorsRes {\n buttonColors: ButtonColors;\n loadingColors: LoadingColors;\n}\n\n// Used by Button, LinkButton\nconst useButtonColors = ({\n type,\n danger,\n disabled,\n}: Props): UseButtonColorsRes => {\n const { theme } = useTheme();\n\n const prefix = useMemo<string>(() => {\n if (danger) return 'Danger';\n return '';\n }, [danger]);\n\n const buttonColors = useMemo<ButtonColors>(() => {\n if (type === 'primary') {\n return !disabled\n ? {\n text: theme[`button${prefix}PrimaryColorText`],\n bg: theme[`button${prefix}PrimaryColorBg`],\n bgHover: theme[`button${prefix}PrimaryColorBgHover`],\n }\n : {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n return !disabled\n ? {\n text: theme[`button${prefix}GhostColorText`],\n bgHover: theme[`button${prefix}GhostColorBgHover`],\n }\n : {\n text: theme.buttonDisabledGhostColorText,\n };\n }, [type, disabled, theme, prefix]);\n\n const loadingColors = useMemo<LoadingColors>(() => {\n if (disabled) {\n return {\n text: theme.buttonDisabledPrimaryColorText,\n bg: theme.buttonDisabledPrimaryColorBg,\n };\n }\n if (type === 'primary') {\n return {\n text: theme[`button${prefix}PrimaryColorLoadingText`],\n bg: theme[`button${prefix}PrimaryColorLoadingBg`],\n };\n }\n return {\n text: theme[`button${prefix}GhostColorLoadingText`],\n bg: theme[`button${prefix}GhostColorLoadingBg`],\n };\n }, [disabled, type, theme, prefix]);\n\n return { buttonColors, loadingColors };\n};\n\nexport default useButtonColors;\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAAgBC,QAAhB,QAAgC,oBAAhC;;AAwBA;AACA,MAAMC,eAAe,GAAG,CAAC;EACvBC,IADuB;EAEvBC,MAFuB;EAGvBC;AAHuB,CAAD,KAIS;EAC/B,MAAM;IAAEC;EAAF,IAAYL,QAAQ,EAA1B;EAEA,MAAMM,MAAM,GAAGP,OAAO,CAAS,MAAM;IACnC,IAAII,MAAJ,EAAY,OAAO,QAAP;IACZ,OAAO,EAAP;EACD,CAHqB,EAGnB,CAACA,MAAD,CAHmB,CAAtB;EAKA,MAAMI,YAAY,GAAGR,OAAO,CAAe,MAAM;IAC/C,IAAIG,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO,CAACE,QAAD,GACH;QACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,kBAAjB,CADb;QAEEG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CAFX;QAGEI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,qBAAjB;MAHhB,CADG,GAMH;QACEE,IAAI,EAAEH,KAAK,CAACM,8BADd;QAEEF,EAAE,EAAEJ,KAAK,CAACO;MAFZ,CANJ;IAUD;;IACD,OAAO,CAACR,QAAD,GACH;MACEI,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,gBAAjB,CADb;MAEEI,OAAO,EAAEL,KAAK,CAAE,SAAQC,MAAO,mBAAjB;IAFhB,CADG,GAKH;MACEE,IAAI,EAAEH,KAAK,CAACQ;IADd,CALJ;EAQD,CArB2B,EAqBzB,CAACX,IAAD,EAAOE,QAAP,EAAiBC,KAAjB,EAAwBC,MAAxB,CArByB,CAA5B;EAuBA,MAAMQ,aAAa,GAAGf,OAAO,CAAgB,MAAM;IACjD,IAAIK,QAAJ,EAAc;MACZ,OAAO;QACLI,IAAI,EAAEH,KAAK,CAACM,8BADP;QAELF,EAAE,EAAEJ,KAAK,CAACO;MAFL,CAAP;IAID;;IACD,IAAIV,IAAI,KAAK,SAAb,EAAwB;MACtB,OAAO;QACLM,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,yBAAjB,CADN;QAELG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,uBAAjB;MAFJ,CAAP;IAID;;IACD,OAAO;MACLE,IAAI,EAAEH,KAAK,CAAE,SAAQC,MAAO,uBAAjB,CADN;MAELG,EAAE,EAAEJ,KAAK,CAAE,SAAQC,MAAO,qBAAjB;IAFJ,CAAP;EAID,CAjB4B,EAiB1B,CAACF,QAAD,EAAWF,IAAX,EAAiBG,KAAjB,EAAwBC,MAAxB,CAjB0B,CAA7B;EAmBA,OAAO;IAAEC,YAAF;IAAgBO;EAAhB,CAAP;AACD,CAvDD;;AAyDA,eAAeb,eAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Checkbox/index.tsx"],"names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","styled","css","Check","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedState","clr","uncheckedIconStyles","p","checked","theme","checkboxUncheckedColorBg","checkboxUncheckedColorBorder","checkedIconStyles","checkboxCheckedColorBg","disabledIconStyles","disabled","checkboxDisabledColorBg","checkboxDisabledColorIcon","checkboxDisabledColorBorder","IconContainer","checkboxSize","borderRadius","checkboxCheckedColorIcon","lineHeight","hoverUncheckedIconStyles","checkboxUncheckedColorBgHover","hoverCheckedIconStyles","checkboxCheckedColorBgHover","hoverStyles","disabledContainerStyles","Container","checkboxVerticalIndent","disabledTextStyles","checkboxDisabledColorText","Text","colorText","Checkbox","value","defaultValue","onChange","size","onKeyDown","onMouseDown","children","rest","ref","forwardedValue","setForwardedValue","e","includes","key","preventDefault","displayName"],"sources":["../../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Check } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedState } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxLabelProps = Omit<\n JSX.IntrinsicElements['label'],\n 'defaultValue' | 'onChange' | 'onClick' | 'ref'\n>;\nexport interface CheckboxProps extends JsxLabelProps, WithSize {\n /**\n * Whether the checkbox is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the checkbox is checked.\n * @default false\n */\n value?: boolean;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: boolean;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: boolean) => void;\n}\n\nconst uncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBg)};\n border-color: ${clr(p.theme.checkboxUncheckedColorBorder)};\n `;\n\nconst checkedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBg)};\n border-color: ${clr(p.theme.checkboxCheckedColorBg)};\n `;\n\nconst disabledIconStyles = (p) =>\n p.disabled &&\n css`\n background-color: ${clr(p.theme.checkboxDisabledColorBg)};\n color: ${clr(p.theme.checkboxDisabledColorIcon)};\n border-color: ${clr(p.theme.checkboxDisabledColorBorder)};\n `;\n\ninterface IconContainerProps extends Required<Pick<CheckboxProps, 'disabled'>> {\n checked: Required<CheckboxProps['value']>;\n}\nconst IconContainer = styled(\n 'span',\n omitEmotionProps('disabled', 'checked')\n)<IconContainerProps>`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n box-sizing: border-box;\n line-height: 1;\n\n border: 1px solid transparent;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.checkboxCheckedColorIcon)};\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n\n ${uncheckedIconStyles};\n ${checkedIconStyles};\n ${disabledIconStyles};\n ${transitionStyles('background-color', 'color', 'border-color')};\n`;\n\nconst hoverUncheckedIconStyles = (p) =>\n !p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxUncheckedColorBgHover)};\n `;\n\nconst hoverCheckedIconStyles = (p) =>\n p.checked &&\n css`\n background-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n border-color: ${clr(p.theme.checkboxCheckedColorBgHover)};\n `;\n\nconst hoverStyles = (p) =>\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n & > span {\n ${hoverUncheckedIconStyles(p)};\n ${hoverCheckedIconStyles(p)};\n }\n }\n }\n `;\n\nconst disabledContainerStyles = (p) =>\n p.disabled &&\n css`\n cursor: not-allowed;\n `;\n\ninterface ContainerProps\n extends Required<Pick<CheckboxProps, 'disabled'>>,\n Pick<CheckboxProps, 'size'> {\n checked: Required<CheckboxProps['value']>;\n}\nconst Container = styled(\n 'label',\n omitEmotionProps('disabled', 'size', 'checked')\n)<ContainerProps>`\n ${resetFocusStyles};\n cursor: pointer;\n user-select: none;\n\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n\n ${hoverStyles};\n ${disabledContainerStyles};\n ${sizeStyles};\n ${transitionStyles('color')};\n`;\n\nconst disabledTextStyles = (p) =>\n p.disabled &&\n css`\n color: ${clr(p.theme.checkboxDisabledColorText)};\n `;\n\ntype TextProps = Required<Pick<CheckboxProps, 'disabled'>>;\nconst Text = styled('div', omitEmotionProps('disabled'))<TextProps>`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n ${disabledTextStyles};\n`;\n\n/**\n * The checkbox that can be enabled or disabled.\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n disabled = false,\n value,\n defaultValue,\n onChange = () => {},\n size,\n onKeyDown = () => {},\n onMouseDown = () => {},\n children,\n ...rest\n },\n ref\n ) => {\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n return (\n <Container\n disabled={disabled}\n checked={forwardedValue}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setForwardedValue(!forwardedValue);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(!forwardedValue);\n e.preventDefault();\n }\n onKeyDown(e);\n }}\n onMouseDown={(e) => {\n onMouseDown(e);\n e.preventDefault();\n }}\n role='checkbox'\n aria-checked={forwardedValue}\n aria-disabled={disabled}\n {...rest}\n ref={ref}\n >\n <IconContainer disabled={disabled} checked={forwardedValue}>\n {forwardedValue && <Check />}\n </IconContainer>\n\n {children && <Text disabled={disabled}>{children}</Text>}\n </Container>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/CheckboxSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,YAAaI,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CALA;AAOA,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAD,CAAW;AACvC,WAAYE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACvC,YAAaJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACxC,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC3C,gBAAiBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC5C;AACA,mBAAoBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,YAAa;AAC/C,gBAAiBL,CAAD,IAAO,CAACA,CAAC,CAACC,KAAF,CAAQK,UAAR,GAAqBN,CAAC,CAACC,KAAF,CAAQG,YAA9B,IAA8C,CAAE;AACvE,CARA;AAUA,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQQ,SAAT,CAAoB;AACzC,CAHA;AAKA;AACA;AACA;;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;AAAEiB,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,EAAwBC,GAAxB,kBACE,oBAAC,SAAD;AAAW,EAAA,IAAI,EAAC,UAAhB;AAA2B;AAA3B,GAAyCD,IAAzC;AAA+C,EAAA,GAAG,EAAEC;AAApD,iBACE,oBAAC,aAAD,OADF,EAEGF,QAAQ,iBAAI,oBAAC,IAAD,QAAOA,QAAP,CAFf,CAF+B,CAAnC;AASAD,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;AAEA,eAAeJ,gBAAf","sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children && <Text>{children}</Text>}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","clr","Skeleton","Container","p","theme","checkboxVerticalIndent","ImageSkeleton","checkboxSize","borderRadius","lineHeight","Text","div","colorText","CheckboxSkeleton","children","rest","ref","displayName"],"sources":["../../../src/CheckboxSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type CheckboxSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n user-select: none;\n display: flex;\n margin: ${(p) => p.theme.checkboxVerticalIndent}em 0;\n ${sizeStyles};\n`;\n\nconst ImageSkeleton = styled(Skeleton)`\n width: ${(p) => p.theme.checkboxSize}em;\n height: ${(p) => p.theme.checkboxSize}em;\n min-width: ${(p) => p.theme.checkboxSize}em;\n min-height: ${(p) => p.theme.checkboxSize}em;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n margin-top: ${(p) => (p.theme.lineHeight - p.theme.checkboxSize) / 2}em;\n`;\n\nconst Text = styled.div`\n margin-left: 0.4em;\n color: ${(p) => clr(p.theme.colorText)};\n`;\n\n/**\n * Provides a checkbox placeholder while a user waits for the content to load.\n */\nconst CheckboxSkeleton = forwardRef<HTMLDivElement, CheckboxSkeletonProps>(\n ({ children, ...rest }, ref) => (\n <Container role='checkbox' aria-busy {...rest} ref={ref}>\n <ImageSkeleton />\n {children && <Text>{children}</Text>}\n </Container>\n )\n);\n\nCheckboxSkeleton.displayName = 'CheckboxSkeleton';\n\nexport default CheckboxSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGP,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA,YAAaI,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,sBAAuB;AAClD,IAAIP,UAAW;AACf,CALA;AAOA,MAAMQ,aAAa,GAAGX,MAAM,CAACM,QAAD,CAAW;AACvC,WAAYE,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACvC,YAAaJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AACxC,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC3C,gBAAiBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQG,YAAa;AAC5C;AACA,mBAAoBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,YAAa;AAC/C,gBAAiBL,CAAD,IAAO,CAACA,CAAC,CAACC,KAAF,CAAQK,UAAR,GAAqBN,CAAC,CAACC,KAAF,CAAQG,YAA9B,IAA8C,CAAE;AACvE,CARA;AAUA,MAAMG,IAAI,GAAGf,MAAM,CAACgB,GAAI;AACxB;AACA,WAAYR,CAAD,IAAOH,GAAG,CAACG,CAAC,CAACC,KAAF,CAAQQ,SAAT,CAAoB;AACzC,CAHA;AAKA;AACA;AACA;;AACA,MAAMC,gBAAgB,gBAAGhB,UAAU,CACjC,CAAC;EAAEiB,QAAF;EAAY,GAAGC;AAAf,CAAD,EAAwBC,GAAxB,kBACE,oBAAC,SAAD;EAAW,IAAI,EAAC,UAAhB;EAA2B;AAA3B,GAAyCD,IAAzC;EAA+C,GAAG,EAAEC;AAApD,iBACE,oBAAC,aAAD,OADF,EAEGF,QAAQ,iBAAI,oBAAC,IAAD,QAAOA,QAAP,CAFf,CAF+B,CAAnC;AASAD,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;AAEA,eAAeJ,gBAAf"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"names":["React","useCallback","useRef","styled","ellipsisStyles","resetFocusStyles","transitionStyles","Left","Right","clr","m","getAccessibilityDateLabel","useDatePickerCalendar","Button","Container","div","min","xs","p","theme","datePickerPadding","MonthContainer","Month","Calendar","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","current","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"mappings":";;AAAA,OAAOA,KAAP,IAAgCC,WAAhC,EAA6CC,MAA7C,QAA2D,OAA3D;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SACEC,cADF,EAEEC,gBAFF,EAGEC,gBAHF,QAIO,mBAJP;AAKA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAEEC,yBAFF,EAGEC,qBAHF,QAIO,8BAJP;AAKA,OAAOC,MAAP,MAAmB,WAAnB;AASA,MAAMC,SAAS,GAAGX,MAAM,CAACY,GAAI;AAC7B;AACA,IAAIL,CAAC,CAACM,GAAF,CAAMC,EAAG;AACb,eAAgBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,iBAAkB;AAChD;AACA,CALA;AAOA,MAAMC,cAAc,GAAGlB,MAAM,CAACY,GAAI;AAClC;AACA;AACA;AACA,CAJA;AAMA,MAAMO,KAAK,GAAGnB,MAAM,CAACY,GAAI;AACzB;AACA;AACA;AACA;AACA,IAAIX,cAAe;AACnB,CANA;AAQA,MAAMmB,QAAQ,GAAGpB,MAAM,CAACY,GAAI;AAC5B;AACA,qCAAsCG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,kBAAmB;AACvE,oBAAqBN,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQK,kBAAmB;AACtD;AACA;AACA,CANA;AAQA,MAAMC,SAAS,GAAGtB,MAAM,CAACY,GAAI;AAC7B;AACA;AACA,WAAYG,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQO,4BAAT,CAAuC;AAC5D,eAAgBR,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQQ,KAAR,CAAcC,KAAM;AAC1C,CALA;AAOA,MAAMC,GAAG,GAAG1B,MAAM,CAACY,GAAI;AACvB,IAAIV,gBAAiB;AACrB;AACA;AACA;AACA,WAAYa,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQW,iBAAkB;AAC5C,YAAaZ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQW,iBAAkB;AAC7C;AACA;AACA;AACA;AACA;AACA,mBAAoBZ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQY,YAAa;AAC/C;AACA;AACA;AACA;AACA;AACA,0BAA2Bb,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQa,yBAAT,CAAoC;AACxE,eAAgBd,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQc,2BAAT,CAAsC;AAC/D;AACA;AACA;AACA,IAAI3B,gBAAgB,CAAC,kBAAD,EAAqB,OAArB,CAA8B;AAClD,CAxBA;AA0BA,MAAM4B,eAAe,GAAG/B,MAAM,CAAC0B,GAAD,CAAM;AACpC,WAAYX,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQgB,kCAAT,CAA6C;AAClE,CAFA;AAIA,MAAMC,KAAK,GAAGjC,MAAM,CAAC0B,GAAD,CAAM;AAC1B,sBAAuBX,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQkB,sBAAT,CAAiC;AACjE,WAAYnB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQmB,wBAAT,CAAmC;AACxD,sBAAuBpB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQoB,0BAAT,CAAqC;AACrE;AACA,CALA;AAOA,MAAMC,WAAW,GAAGrC,MAAM,CAAC0B,GAAD,CAAM;AAChC,sBAAuBX,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQsB,4BAAT,CAAuC;AACvE,WAAYvB,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQuB,8BAAT,CAAyC;AAC9D,CAHA;;AAKA,MAAMC,kBAAqD,GAAG,CAAC;AAC7DC,EAAAA,cAD6D;AAE7DC,EAAAA,MAF6D;AAG7DC,EAAAA,KAH6D;AAI7DC,EAAAA,QAAQ,GAAG,MAAM,CAAE;AAJ0C,CAAD,KAKxD;AACJ,QAAMC,WAAW,GAAG9C,MAAM,CAAC6C,QAAD,CAA1B;AAEA9C,EAAAA,WAAW,CAAC,MAAM;AAChB+C,IAAAA,WAAW,CAACC,OAAZ,GAAsBF,QAAtB;AACD,GAFU,EAER,CAACA,QAAD,CAFQ,CAAX;AAIA,QAAM;AAAEG,IAAAA,aAAF;AAAiBC,IAAAA,WAAjB;AAA8BC,IAAAA;AAA9B,MAAuCxC,qBAAqB,CAAC;AACjEkC,IAAAA,KADiE;AAEjEF,IAAAA;AAFiE,GAAD,CAAlE;AAKA,QAAMS,WAAW,GAAGpD,WAAW,CAG5BqD,IAAD,KAAiB;AACfC,IAAAA,QAAQ,EAAE,CADK;AAEfC,IAAAA,IAAI,EAAE,QAFS;AAGf,kBAAc7C,yBAAyB,CAAC2C,IAAD,EAAOT,MAAP,CAHxB;AAIfY,IAAAA,OAAO,EAAE,MAAM;AACb,UAAI,CAACT,WAAW,CAACC,OAAjB,EAA0B;AAC1BD,MAAAA,WAAW,CAACC,OAAZ,CAAoBK,IAAI,CAACI,OAAL,KAAiB,IAArC;AACD,KAPc;AAQfC,IAAAA,SAAS,EAAGC,CAAD,IAAO;AAChB,UAAI,CAACZ,WAAW,CAACC,OAAjB,EAA0B;;AAC1B,UAAI,CAAC,OAAD,EAAU,GAAV,EAAeY,QAAf,CAAwBD,CAAC,CAACE,GAA1B,CAAJ,EAAoC;AAClCd,QAAAA,WAAW,CAACC,OAAZ,CAAoBK,IAAI,CAACI,OAAL,KAAiB,IAArC;AACAE,QAAAA,CAAC,CAACG,cAAF;AACD;AACF,KAdc;AAefC,IAAAA,WAAW,EAAGJ,CAAD,IAAOA,CAAC,CAACG,cAAF;AAfL,GAAjB,CAH6B,EAoB7B,CAAClB,MAAD,CApB6B,CAA/B;AAuBA,sBACE,oBAAC,SAAD,qBACE,oBAAC,cAAD,qBACE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,OAAO,EAAE,MAAMM,WAAW,CAAC,CAAC,CAAF,CAJ5B;AAKE,kBAAYN,MAAM,CAACoB;AALrB,kBAOE,oBAAC,IAAD,OAPF,CADF,eAUE,oBAAC,KAAD,QACGpB,MAAM,CAACqB,MAAP,CAAchB,aAAa,CAACiB,KAA5B,CADH,OACwCjB,aAAa,CAACkB,IADtD,CAVF,eAaE,oBAAC,MAAD;AACE,IAAA,IAAI,EAAC,OADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,IAAI,EAAC,OAHP;AAIE,IAAA,OAAO,EAAE,MAAMjB,WAAW,CAAC,CAAD,CAJ5B;AAKE,kBAAYN,MAAM,CAACwB;AALrB,kBAOE,oBAAC,KAAD,OAPF,CAbF,CADF,eAyBE,oBAAC,QAAD,QACG,CAACzB,cAAc,KAAK,QAAnB,GACEC,MAAM,CAACyB,eADT,GAEE,CAAC,GAAGzB,MAAM,CAACyB,eAAP,CAAuBC,KAAvB,CAA6B,CAA7B,CAAJ,EAAqC1B,MAAM,CAACyB,eAAP,CAAuB,CAAvB,CAArC,CAFH,EAGCE,GAHD,CAGMC,IAAD,iBACJ,oBAAC,SAAD;AAAW,IAAA,GAAG,EAAEA;AAAhB,KAAuBA,IAAvB,CAJD,CADH,EAQGrB,IAAI,CAACoB,GAAL,CAAS,CAAC;AAAEE,IAAAA,IAAF;AAAQpB,IAAAA;AAAR,GAAD,KAAoB;AAC5B,QAAIoB,IAAI,KAAK,iBAAb,EAAgC;AAC9B,0BACE,oBAAC,eAAD;AAAiB,QAAA,GAAG,EAAEpB,IAAI,CAACqB,WAAL;AAAtB,SAA8CtB,WAAW,CAACC,IAAD,CAAzD,GACGA,IAAI,CAACsB,OAAL,EADH,CADF;AAKD;;AACD,QAAIF,IAAI,KAAK,aAAb,EAA4B;AAC1B,0BACE,oBAAC,WAAD;AAAa,QAAA,GAAG,EAAEpB,IAAI,CAACqB,WAAL;AAAlB,SAA0CtB,WAAW,CAACC,IAAD,CAArD,GACGA,IAAI,CAACsB,OAAL,EADH,CADF;AAKD;;AACD,QAAIF,IAAI,KAAK,OAAb,EAAsB;AACpB,0BACE,oBAAC,KAAD;AAAO,QAAA,GAAG,EAAEpB,IAAI,CAACqB,WAAL;AAAZ,SAAoCtB,WAAW,CAACC,IAAD,CAA/C,GACGA,IAAI,CAACsB,OAAL,EADH,CADF;AAKD;;AACD,wBACE,oBAAC,GAAD;AAAK,MAAA,GAAG,EAAEtB,IAAI,CAACqB,WAAL;AAAV,OAAkCtB,WAAW,CAACC,IAAD,CAA7C,GACGA,IAAI,CAACsB,OAAL,EADH,CADF;AAKD,GA3BA,CARH,CAzBF,CADF;AAiED,CAzGD;;AA2GA,eAAejC,kBAAf","sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n ellipsisStyles,\n resetFocusStyles,\n transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n DatePickerLocale,\n getAccessibilityDateLabel,\n useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n firstDayOfWeek: 'sunday' | 'monday';\n locale: DatePickerLocale;\n value?: number | null;\n onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n // For popover\n ${m.min.xs} {\n padding: ${(p) => p.theme.datePickerPadding}em;\n }\n`;\n\nconst MonthContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n flex-grow: 1;\n font-weight: 500;\n text-align: center;\n padding: 0 0.4em;\n ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n display: grid;\n grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n justify-content: space-between;\n overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n justify-self: center;\n align-self: center;\n color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n ${resetFocusStyles};\n justify-self: center;\n align-self: center;\n\n width: ${(p) => p.theme.datePickerDaySize}em;\n height: ${(p) => p.theme.datePickerDaySize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n }\n }\n\n ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n firstDayOfWeek,\n locale,\n value,\n onChange = () => {},\n}) => {\n const onChangeRef = useRef(onChange);\n\n useCallback(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n value,\n firstDayOfWeek,\n });\n\n const getDayProps = useCallback<\n (date: Date) => HTMLAttributes<HTMLDivElement>\n >(\n (date: Date) => ({\n tabIndex: 0,\n role: 'button',\n 'aria-label': getAccessibilityDateLabel(date, locale),\n onClick: () => {\n if (!onChangeRef.current) return;\n onChangeRef.current(date.getTime() / 1000);\n },\n onKeyDown: (e) => {\n if (!onChangeRef.current) return;\n if (['Enter', ' '].includes(e.key)) {\n onChangeRef.current(date.getTime() / 1000);\n e.preventDefault();\n }\n },\n onMouseDown: (e) => e.preventDefault(),\n }),\n [locale]\n );\n\n return (\n <Container>\n <MonthContainer>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => updateMonth(-1)}\n aria-label={locale.prevMonthLabel}\n >\n <Left />\n </Button>\n <Month>\n {locale.months[selectedMonth.month]} {selectedMonth.year}\n </Month>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => updateMonth(1)}\n aria-label={locale.nextMonthLabel}\n >\n <Right />\n </Button>\n </MonthContainer>\n\n <Calendar>\n {(firstDayOfWeek === 'sunday'\n ? locale.shortDaysOfWeek\n : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n ).map((item) => (\n <DayOfWeek key={item}>{item}</DayOfWeek>\n ))}\n\n {days.map(({ type, date }) => {\n if (type === 'dayAnotherMonth') {\n return (\n <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </DayAnotherMonth>\n );\n }\n if (type === 'selectedDay') {\n return (\n <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </SelectedDay>\n );\n }\n if (type === 'today') {\n return (\n <Today key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </Today>\n );\n }\n return (\n <Day key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </Day>\n );\n })}\n </Calendar>\n </Container>\n );\n};\n\nexport default DatePickerCalendar;\n"],"file":"DatePickerCalendar.js"}
1
+ {"version":3,"file":"DatePickerCalendar.js","names":["React","useCallback","useRef","styled","ellipsisStyles","resetFocusStyles","transitionStyles","Left","Right","clr","m","getAccessibilityDateLabel","useDatePickerCalendar","Button","Container","div","min","xs","p","theme","datePickerPadding","MonthContainer","Month","Calendar","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","current","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n ellipsisStyles,\n resetFocusStyles,\n transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n DatePickerLocale,\n getAccessibilityDateLabel,\n useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n firstDayOfWeek: 'sunday' | 'monday';\n locale: DatePickerLocale;\n value?: number | null;\n onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n // For popover\n ${m.min.xs} {\n padding: ${(p) => p.theme.datePickerPadding}em;\n }\n`;\n\nconst MonthContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n flex-grow: 1;\n font-weight: 500;\n text-align: center;\n padding: 0 0.4em;\n ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n display: grid;\n grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n justify-content: space-between;\n overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n justify-self: center;\n align-self: center;\n color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n ${resetFocusStyles};\n justify-self: center;\n align-self: center;\n\n width: ${(p) => p.theme.datePickerDaySize}em;\n height: ${(p) => p.theme.datePickerDaySize}em;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-radius: ${(p) => p.theme.borderRadius}em;\n cursor: pointer;\n\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n }\n }\n\n ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n firstDayOfWeek,\n locale,\n value,\n onChange = () => {},\n}) => {\n const onChangeRef = useRef(onChange);\n\n useCallback(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n value,\n firstDayOfWeek,\n });\n\n const getDayProps = useCallback<\n (date: Date) => HTMLAttributes<HTMLDivElement>\n >(\n (date: Date) => ({\n tabIndex: 0,\n role: 'button',\n 'aria-label': getAccessibilityDateLabel(date, locale),\n onClick: () => {\n if (!onChangeRef.current) return;\n onChangeRef.current(date.getTime() / 1000);\n },\n onKeyDown: (e) => {\n if (!onChangeRef.current) return;\n if (['Enter', ' '].includes(e.key)) {\n onChangeRef.current(date.getTime() / 1000);\n e.preventDefault();\n }\n },\n onMouseDown: (e) => e.preventDefault(),\n }),\n [locale]\n );\n\n return (\n <Container>\n <MonthContainer>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => updateMonth(-1)}\n aria-label={locale.prevMonthLabel}\n >\n <Left />\n </Button>\n <Month>\n {locale.months[selectedMonth.month]} {selectedMonth.year}\n </Month>\n <Button\n type='ghost'\n wide='never'\n size='small'\n onClick={() => updateMonth(1)}\n aria-label={locale.nextMonthLabel}\n >\n <Right />\n </Button>\n </MonthContainer>\n\n <Calendar>\n {(firstDayOfWeek === 'sunday'\n ? locale.shortDaysOfWeek\n : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n ).map((item) => (\n <DayOfWeek key={item}>{item}</DayOfWeek>\n ))}\n\n {days.map(({ type, date }) => {\n if (type === 'dayAnotherMonth') {\n return (\n <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </DayAnotherMonth>\n );\n }\n if (type === 'selectedDay') {\n return (\n <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </SelectedDay>\n );\n }\n if (type === 'today') {\n return (\n <Today key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </Today>\n );\n }\n return (\n <Day key={date.toISOString()} {...getDayProps(date)}>\n {date.getDate()}\n </Day>\n );\n })}\n </Calendar>\n </Container>\n );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/DatePicker/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","SelectContainer","ClearButtonContainer","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","e","includes","key","preventDefault","stopPropagation","current","focus","clearLabel","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n defaultLocale,\n DatePickerLocale,\n defaultFormat,\n getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { SelectContainer } from '../Select';\nimport {\n ClearButtonContainer,\n ClearIcon,\n IconContainer,\n Placeholder,\n Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n /**\n * The placeholder of the date picker.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the date picker is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The format of the date.\n * @default undefined\n */\n format?: (date: Date) => string;\n /**\n * The first day of the week.\n * @default sunday\n */\n firstDayOfWeek?: 'sunday' | 'monday';\n /**\n * The locale of the date picker.\n * @default undefined\n */\n locale?: DatePickerLocale;\n /**\n * Selected timestamp.\n * @default undefined\n */\n value?: number | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: number | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n placeholder,\n disabled = false,\n format = defaultFormat,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(false);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const formattedValue = useMemo(() => {\n if (!forwardedValue) return forwardedValue;\n return format(new Date(forwardedValue * 1000), locale);\n }, [forwardedValue, format, locale]);\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const calendar = (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onChange={(v) => {\n setForwardedValue(v);\n closeHandler();\n }}\n />\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue !== undefined && forwardedValue !== null\n ? getAccessibilityDateLabel(\n new Date(forwardedValue * 1000),\n locale\n )\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {formattedValue !== undefined && formattedValue !== null ? (\n <>\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n <ClearButtonContainer aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </ClearButtonContainer>\n </>\n ) : (\n <>\n <Placeholder>{placeholder}</Placeholder>\n <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n </>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <Popover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendar}\n </Popover>\n ) : (\n <Modal\n title={placeholder}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendar}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"file":"index.js"}
1
+ {"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","SelectContainer","ClearButtonContainer","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","e","includes","key","preventDefault","stopPropagation","current","focus","clearLabel","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n defaultLocale,\n DatePickerLocale,\n defaultFormat,\n getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { SelectContainer } from '../Select';\nimport {\n ClearButtonContainer,\n ClearIcon,\n IconContainer,\n Placeholder,\n Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n /**\n * The placeholder of the date picker.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the date picker is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * The format of the date.\n * @default undefined\n */\n format?: (date: Date) => string;\n /**\n * The first day of the week.\n * @default sunday\n */\n firstDayOfWeek?: 'sunday' | 'monday';\n /**\n * The locale of the date picker.\n * @default undefined\n */\n locale?: DatePickerLocale;\n /**\n * Selected timestamp.\n * @default undefined\n */\n value?: number | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: number | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n placeholder,\n disabled = false,\n format = defaultFormat,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(false);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const formattedValue = useMemo(() => {\n if (!forwardedValue) return forwardedValue;\n return format(new Date(forwardedValue * 1000), locale);\n }, [forwardedValue, format, locale]);\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const calendar = (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onChange={(v) => {\n setForwardedValue(v);\n closeHandler();\n }}\n />\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue !== undefined && forwardedValue !== null\n ? getAccessibilityDateLabel(\n new Date(forwardedValue * 1000),\n locale\n )\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {formattedValue !== undefined && formattedValue !== null ? (\n <>\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n <ClearButtonContainer aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </ClearButtonContainer>\n </>\n ) : (\n <>\n <Placeholder>{placeholder}</Placeholder>\n <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n </>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <Popover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendar}\n </Popover>\n ) : (\n <Modal\n title={placeholder}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendar}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}