react-science 11.2.0 → 12.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/lib/components/accordion/accordion.js +1 -0
  2. package/lib/components/accordion/accordion.js.map +1 -1
  3. package/lib/components/forms/index.d.ts +1 -1
  4. package/lib/components/forms/index.d.ts.map +1 -1
  5. package/lib/components/forms/index.js +1 -1
  6. package/lib/components/forms/index.js.map +1 -1
  7. package/lib/components/forms/radio-button-group/RadioButton.d.ts +4 -0
  8. package/lib/components/forms/radio-button-group/RadioButton.d.ts.map +1 -0
  9. package/lib/components/forms/radio-button-group/RadioButton.js +53 -0
  10. package/lib/components/forms/radio-button-group/RadioButton.js.map +1 -0
  11. package/lib/components/forms/radio-button-group/RadioButtonGroup.d.ts +7 -0
  12. package/lib/components/forms/radio-button-group/RadioButtonGroup.d.ts.map +1 -0
  13. package/lib/components/forms/radio-button-group/RadioButtonGroup.js +41 -0
  14. package/lib/components/forms/radio-button-group/RadioButtonGroup.js.map +1 -0
  15. package/lib/components/forms/radio-button-group/index.d.ts +3 -0
  16. package/lib/components/forms/radio-button-group/index.d.ts.map +1 -0
  17. package/lib/components/forms/radio-button-group/index.js +3 -0
  18. package/lib/components/forms/radio-button-group/index.js.map +1 -0
  19. package/lib/components/forms/utils/use_input_id.d.ts +2 -0
  20. package/lib/components/forms/utils/use_input_id.d.ts.map +1 -0
  21. package/lib/components/forms/utils/use_input_id.js +9 -0
  22. package/lib/components/forms/utils/use_input_id.js.map +1 -0
  23. package/lib/components/hooks/index.d.ts +0 -1
  24. package/lib/components/hooks/index.d.ts.map +1 -1
  25. package/lib/components/hooks/index.js +0 -1
  26. package/lib/components/hooks/index.js.map +1 -1
  27. package/lib/components/info-panel/InfoPanel.d.ts.map +1 -1
  28. package/lib/components/info-panel/InfoPanel.js +32 -43
  29. package/lib/components/info-panel/InfoPanel.js.map +1 -1
  30. package/lib/components/root-layout/root_layout.d.ts.map +1 -1
  31. package/lib/components/root-layout/root_layout.js +1 -3
  32. package/lib/components/root-layout/root_layout.js.map +1 -1
  33. package/lib/components/table/table_header_cell.d.ts.map +1 -1
  34. package/lib/components/table/table_header_cell.js +29 -13
  35. package/lib/components/table/table_header_cell.js.map +1 -1
  36. package/lib/components/table/table_root.d.ts +9 -0
  37. package/lib/components/table/table_root.d.ts.map +1 -1
  38. package/lib/components/table/table_root.js +37 -5
  39. package/lib/components/table/table_root.js.map +1 -1
  40. package/package.json +3 -6
  41. package/src/components/accordion/accordion.tsx +1 -0
  42. package/src/components/forms/index.ts +1 -1
  43. package/src/components/forms/radio-button-group/RadioButton.tsx +73 -0
  44. package/src/components/forms/radio-button-group/RadioButtonGroup.tsx +80 -0
  45. package/src/components/forms/radio-button-group/index.ts +2 -0
  46. package/src/components/forms/utils/use_input_id.ts +13 -0
  47. package/src/components/hooks/index.ts +0 -1
  48. package/src/components/info-panel/InfoPanel.tsx +51 -56
  49. package/src/components/root-layout/root_layout.tsx +1 -5
  50. package/src/components/table/table_header_cell.tsx +53 -23
  51. package/src/components/table/table_root.tsx +49 -4
  52. package/lib/components/forms/radio-group/ButtonRadioItem.d.ts +0 -3
  53. package/lib/components/forms/radio-group/ButtonRadioItem.d.ts.map +0 -1
  54. package/lib/components/forms/radio-group/ButtonRadioItem.js +0 -50
  55. package/lib/components/forms/radio-group/ButtonRadioItem.js.map +0 -1
  56. package/lib/components/forms/radio-group/RadioGroup.d.ts +0 -18
  57. package/lib/components/forms/radio-group/RadioGroup.d.ts.map +0 -1
  58. package/lib/components/forms/radio-group/RadioGroup.js +0 -38
  59. package/lib/components/forms/radio-group/RadioGroup.js.map +0 -1
  60. package/lib/components/forms/radio-group/index.d.ts +0 -2
  61. package/lib/components/forms/radio-group/index.d.ts.map +0 -1
  62. package/lib/components/forms/radio-group/index.js +0 -2
  63. package/lib/components/forms/radio-group/index.js.map +0 -1
  64. package/lib/components/hooks/useModifiedPopper.d.ts +0 -13
  65. package/lib/components/hooks/useModifiedPopper.d.ts.map +0 -1
  66. package/lib/components/hooks/useModifiedPopper.js +0 -48
  67. package/lib/components/hooks/useModifiedPopper.js.map +0 -1
  68. package/lib/components/root-layout/query_client.d.ts +0 -3
  69. package/lib/components/root-layout/query_client.d.ts.map +0 -1
  70. package/lib/components/root-layout/query_client.js +0 -11
  71. package/lib/components/root-layout/query_client.js.map +0 -1
  72. package/src/components/forms/radio-group/ButtonRadioItem.tsx +0 -78
  73. package/src/components/forms/radio-group/RadioGroup.tsx +0 -75
  74. package/src/components/forms/radio-group/index.ts +0 -1
  75. package/src/components/hooks/useModifiedPopper.ts +0 -77
  76. package/src/components/root-layout/query_client.ts +0 -11
@@ -1,18 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import type { InputVariant } from '../styles.js';
3
- export interface RadioOption {
4
- value: string;
5
- label: ReactNode;
6
- disabled?: boolean;
7
- }
8
- export interface RadioGroupProps {
9
- selected?: RadioOption;
10
- options?: RadioOption[];
11
- onSelect?: (option: RadioOption) => void;
12
- name?: string;
13
- disabled?: boolean;
14
- variant?: InputVariant;
15
- id?: string;
16
- }
17
- export declare function RadioGroup(props: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
18
- //# sourceMappingURL=RadioGroup.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAkBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,oDAkChD"}
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
2
- /** @jsxImportSource @emotion/react */
3
- import { css } from '@emotion/react';
4
- import * as RadioGroupRadix from '@radix-ui/react-radio-group';
5
- import { ButtonRadioItem } from './ButtonRadioItem.js';
6
- const rootStyles = {
7
- basic: css({
8
- display: 'flex',
9
- flexDirection: 'row',
10
- width: 'fit-content',
11
- }),
12
- button: (variant) => css({
13
- ' & > *:first-of-type, & > *:first-of-type span': {
14
- borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
15
- },
16
- ' & > *:last-of-type, & > *:last-of-type span': {
17
- borderRightWidth: 1,
18
- borderRadius: variant === 'default' ? '0 6px 6px 0' : '0 4px 4px 0',
19
- },
20
- }),
21
- };
22
- export function RadioGroup(props) {
23
- const { id, selected, disabled: groupDisabled = false, options = [], onSelect, name = '', variant = 'default', } = props;
24
- return (_jsx(RadioGroupRadix.Root, { id: id, css: [rootStyles.basic, rootStyles.button(variant)], style: {
25
- gap: 0,
26
- }, value: selected?.value, name: name, disabled: groupDisabled, children: options?.map(({ value, label, disabled }) => {
27
- const childProps = {
28
- value,
29
- label,
30
- disabled: groupDisabled || disabled,
31
- onSelect,
32
- variant,
33
- name,
34
- };
35
- return _jsx(ButtonRadioItem, { ...childProps }, value);
36
- }) }));
37
- }
38
- //# sourceMappingURL=RadioGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/RadioGroup.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,eAAe,MAAM,6BAA6B,CAAC;AAK/D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAgBvD,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,aAAa;KACrB,CAAC;IACF,MAAM,EAAE,CAAC,OAAqB,EAAE,EAAE,CAChC,GAAG,CAAC;QACF,gDAAgD,EAAE;YAChD,YAAY,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;SACpE;QACD,8CAA8C,EAAE;YAC9C,gBAAgB,EAAE,CAAC;YACnB,YAAY,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa;SACpE;KACF,CAAC;CACL,CAAC;AACF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,OAAO,GAAG,EAAE,EACZ,QAAQ,EACR,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,SAAS,GACpB,GAAG,KAAK,CAAC;IACV,OAAO,CACL,KAAC,eAAe,CAAC,IAAI,IACnB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EACnD,KAAK,EAAE;YACL,GAAG,EAAE,CAAC;SACP,EACD,KAAK,EAAE,QAAQ,EAAE,KAAK,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,aAAa,YAEtB,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;YAC3C,MAAM,UAAU,GAAG;gBACjB,KAAK;gBACL,KAAK;gBACL,QAAQ,EAAE,aAAa,IAAI,QAAQ;gBACnC,QAAQ;gBACR,OAAO;gBACP,IAAI;aACL,CAAC;YACF,OAAO,KAAC,eAAe,OAAiB,UAAU,IAArB,KAAK,CAAoB,CAAC;QACzD,CAAC,CAAC,GACmB,CACxB,CAAC;AACJ,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './RadioGroup.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './RadioGroup.js';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
@@ -1,13 +0,0 @@
1
- import type { Placement } from '@popperjs/core';
2
- import type { HTMLAttributes } from 'react';
3
- export interface UseModifiedPopperReturn<R extends Element = HTMLDivElement, P extends HTMLElement = HTMLDivElement> {
4
- setReferenceElement: (ref: R | null) => void;
5
- setPopperElement: (popper: P | null) => void;
6
- popperProps: HTMLAttributes<P>;
7
- }
8
- export declare function useModifiedPopper<R extends Element = HTMLDivElement, P extends HTMLElement = HTMLDivElement>(options: {
9
- placement?: Placement;
10
- offset?: number;
11
- sameWidth?: boolean;
12
- }): UseModifiedPopperReturn<R, P>;
13
- //# sourceMappingURL=useModifiedPopper.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useModifiedPopper.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useModifiedPopper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AA6B5C,MAAM,WAAW,uBAAuB,CACtC,CAAC,SAAS,OAAO,GAAG,cAAc,EAClC,CAAC,SAAS,WAAW,GAAG,cAAc;IAEtC,mBAAmB,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,gBAAgB,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAChC;AAED,wBAAgB,iBAAiB,CAC/B,CAAC,SAAS,OAAO,GAAG,cAAc,EAClC,CAAC,SAAS,WAAW,GAAG,cAAc,EACtC,OAAO,EAAE;IACT,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,GAAG,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,CA8BhC"}
@@ -1,48 +0,0 @@
1
- import { useState } from 'react';
2
- import { usePopper } from 'react-popper';
3
- const sameWidthModifier = {
4
- name: 'sameWidth',
5
- enabled: true,
6
- phase: 'beforeWrite',
7
- requires: ['computeStyles'],
8
- fn: ({ state }) => {
9
- state.styles.popper.width = `${state.rects.reference.width}px`;
10
- },
11
- effect: ({ state }) => {
12
- state.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width}px`;
13
- },
14
- };
15
- function getOffsetModifier(offset) {
16
- return {
17
- name: 'offset',
18
- options: {
19
- offset: [0, offset],
20
- },
21
- };
22
- }
23
- export function useModifiedPopper(options) {
24
- const { offset, placement, sameWidth } = options;
25
- const [referenceElement, setReferenceElement] = useState(null);
26
- const [popperElement, setPopperElement] = useState(null);
27
- const modifiers = [];
28
- if (sameWidth) {
29
- modifiers.push(sameWidthModifier);
30
- }
31
- if (offset) {
32
- modifiers.push(getOffsetModifier(offset));
33
- }
34
- const { styles, attributes } = usePopper(referenceElement, popperElement, {
35
- placement,
36
- strategy: 'fixed',
37
- modifiers,
38
- });
39
- return {
40
- setReferenceElement,
41
- setPopperElement,
42
- popperProps: {
43
- style: styles.popper,
44
- ...attributes.popper,
45
- },
46
- };
47
- }
48
- //# sourceMappingURL=useModifiedPopper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useModifiedPopper.js","sourceRoot":"","sources":["../../../src/components/hooks/useModifiedPopper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,MAAM,iBAAiB,GAA0B;IAC/C,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC,eAAe,CAAC;IAC3B,EAAE,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QAChB,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACjE,CAAC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QACpB,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAClC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,qBAAqB,EAAE,CAAC,KACnD,IAAI,CAAC;IACP,CAAC;CACF,CAAC;AAEF,SAAS,iBAAiB,CAAC,MAAc;IACvC,OAAO;QACL,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC;SACpB;KACF,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,iBAAiB,CAG/B,OAID;IACC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;IAEjD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IACzE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IAEnE,MAAM,SAAS,GAA4C,EAAE,CAAC;IAE9D,IAAI,SAAS,EAAE,CAAC;QACd,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,MAAM,EAAE,CAAC;QACX,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC,gBAAgB,EAAE,aAAa,EAAE;QACxE,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,SAAS;KACV,CAAC,CAAC;IAEH,OAAO;QACL,mBAAmB;QACnB,gBAAgB;QAChB,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,MAAM;YACpB,GAAG,UAAU,CAAC,MAAM;SACrB;KACF,CAAC;AACJ,CAAC"}
@@ -1,3 +0,0 @@
1
- import { QueryClient } from '@tanstack/react-query';
2
- export declare const queryClient: QueryClient;
3
- //# sourceMappingURL=query_client.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"query_client.d.ts","sourceRoot":"","sources":["../../../src/components/root-layout/query_client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,eAAO,MAAM,WAAW,aAQtB,CAAC"}
@@ -1,11 +0,0 @@
1
- import { QueryClient } from '@tanstack/react-query';
2
- export const queryClient = new QueryClient({
3
- defaultOptions: {
4
- queries: {
5
- refetchOnMount: false,
6
- refetchOnReconnect: false,
7
- refetchOnWindowFocus: false,
8
- },
9
- },
10
- });
11
- //# sourceMappingURL=query_client.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"query_client.js","sourceRoot":"","sources":["../../../src/components/root-layout/query_client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC;IACzC,cAAc,EAAE;QACd,OAAO,EAAE;YACP,cAAc,EAAE,KAAK;YACrB,kBAAkB,EAAE,KAAK;YACzB,oBAAoB,EAAE,KAAK;SAC5B;KACF;CACF,CAAC,CAAC"}
@@ -1,78 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css } from '@emotion/react';
3
- import * as RadioGroup from '@radix-ui/react-radio-group';
4
-
5
- import type { InputVariant } from '../styles.js';
6
- import { enabledColor } from '../styles.js';
7
-
8
- import type { RadioGroupProps, RadioOption } from './RadioGroup.js';
9
-
10
- const buttonStyles = {
11
- container: css({
12
- border: '1px solid rgba(0, 0, 0, 0.25)',
13
- borderRightWidth: 0,
14
- position: 'relative',
15
- }),
16
- item: (disabled: boolean, variant?: InputVariant) =>
17
- css({
18
- opacity: disabled ? 0.25 : 1,
19
- padding: variant === 'default' ? '0px 15px' : '0px 7px',
20
- width: '100%',
21
- height: '100%',
22
- cursor: 'pointer',
23
- ':hover': {
24
- '& > label': {
25
- color: disabled ? '' : enabledColor,
26
- },
27
- },
28
- }),
29
-
30
- indicator: css({
31
- position: 'absolute',
32
- top: -1,
33
- left: -1,
34
- right: -1,
35
- bottom: -1,
36
- zIndex: 10,
37
- border: '1px solid',
38
- borderColor: enabledColor,
39
-
40
- '& ~ label': {
41
- color: enabledColor,
42
- },
43
- }),
44
-
45
- label: (variant?: InputVariant) =>
46
- css({
47
- cursor: 'pointer',
48
- fontSize: variant === 'small' ? '1em' : '1.125em',
49
- lineHeight: variant === 'default' ? '30px' : '22px',
50
- }),
51
- };
52
-
53
- export function ButtonRadioItem(
54
- prop: RadioOption & Pick<RadioGroupProps, 'onSelect' | 'variant' | 'name'>,
55
- ) {
56
- const { value, label, disabled = false, onSelect, variant, name } = prop;
57
- return (
58
- <div css={buttonStyles.container}>
59
- <RadioGroup.Item
60
- css={buttonStyles.item(disabled, variant)}
61
- value={value}
62
- id={`${value}${name}`}
63
- onClick={() => {
64
- if (!disabled) onSelect?.(prop);
65
- }}
66
- >
67
- <RadioGroup.Indicator css={buttonStyles.indicator} />
68
- <label
69
- css={buttonStyles.label(variant)}
70
- htmlFor={`${value}${name}`}
71
- style={{}}
72
- >
73
- {label}
74
- </label>
75
- </RadioGroup.Item>
76
- </div>
77
- );
78
- }
@@ -1,75 +0,0 @@
1
- /** @jsxImportSource @emotion/react */
2
- import { css } from '@emotion/react';
3
- import * as RadioGroupRadix from '@radix-ui/react-radio-group';
4
- import type { ReactNode } from 'react';
5
-
6
- import type { InputVariant } from '../styles.js';
7
-
8
- import { ButtonRadioItem } from './ButtonRadioItem.js';
9
-
10
- export interface RadioOption {
11
- value: string;
12
- label: ReactNode;
13
- disabled?: boolean;
14
- }
15
- export interface RadioGroupProps {
16
- selected?: RadioOption;
17
- options?: RadioOption[];
18
- onSelect?: (option: RadioOption) => void;
19
- name?: string;
20
- disabled?: boolean;
21
- variant?: InputVariant;
22
- id?: string;
23
- }
24
- const rootStyles = {
25
- basic: css({
26
- display: 'flex',
27
- flexDirection: 'row',
28
- width: 'fit-content',
29
- }),
30
- button: (variant: InputVariant) =>
31
- css({
32
- ' & > *:first-of-type, & > *:first-of-type span': {
33
- borderRadius: variant === 'default' ? '6px 0 0 6px' : '4px 0 0 4px',
34
- },
35
- ' & > *:last-of-type, & > *:last-of-type span': {
36
- borderRightWidth: 1,
37
- borderRadius: variant === 'default' ? '0 6px 6px 0' : '0 4px 4px 0',
38
- },
39
- }),
40
- };
41
- export function RadioGroup(props: RadioGroupProps) {
42
- const {
43
- id,
44
- selected,
45
- disabled: groupDisabled = false,
46
- options = [],
47
- onSelect,
48
- name = '',
49
- variant = 'default',
50
- } = props;
51
- return (
52
- <RadioGroupRadix.Root
53
- id={id}
54
- css={[rootStyles.basic, rootStyles.button(variant)]}
55
- style={{
56
- gap: 0,
57
- }}
58
- value={selected?.value}
59
- name={name}
60
- disabled={groupDisabled}
61
- >
62
- {options?.map(({ value, label, disabled }) => {
63
- const childProps = {
64
- value,
65
- label,
66
- disabled: groupDisabled || disabled,
67
- onSelect,
68
- variant,
69
- name,
70
- };
71
- return <ButtonRadioItem key={value} {...childProps} />;
72
- })}
73
- </RadioGroupRadix.Root>
74
- );
75
- }
@@ -1 +0,0 @@
1
- export * from './RadioGroup.js';
@@ -1,77 +0,0 @@
1
- import type { Placement } from '@popperjs/core';
2
- import type { HTMLAttributes } from 'react';
3
- import { useState } from 'react';
4
- import type { Modifier } from 'react-popper';
5
- import { usePopper } from 'react-popper';
6
-
7
- const sameWidthModifier: Modifier<'sameWidth'> = {
8
- name: 'sameWidth',
9
- enabled: true,
10
- phase: 'beforeWrite',
11
- requires: ['computeStyles'],
12
- fn: ({ state }) => {
13
- state.styles.popper.width = `${state.rects.reference.width}px`;
14
- },
15
- effect: ({ state }) => {
16
- state.elements.popper.style.width = `${
17
- state.elements.reference.getBoundingClientRect().width
18
- }px`;
19
- },
20
- };
21
-
22
- function getOffsetModifier(offset: number): Modifier<'offset'> {
23
- return {
24
- name: 'offset',
25
- options: {
26
- offset: [0, offset],
27
- },
28
- };
29
- }
30
-
31
- export interface UseModifiedPopperReturn<
32
- R extends Element = HTMLDivElement,
33
- P extends HTMLElement = HTMLDivElement,
34
- > {
35
- setReferenceElement: (ref: R | null) => void;
36
- setPopperElement: (popper: P | null) => void;
37
- popperProps: HTMLAttributes<P>;
38
- }
39
-
40
- export function useModifiedPopper<
41
- R extends Element = HTMLDivElement,
42
- P extends HTMLElement = HTMLDivElement,
43
- >(options: {
44
- placement?: Placement;
45
- offset?: number;
46
- sameWidth?: boolean;
47
- }): UseModifiedPopperReturn<R, P> {
48
- const { offset, placement, sameWidth } = options;
49
-
50
- const [referenceElement, setReferenceElement] = useState<R | null>(null);
51
- const [popperElement, setPopperElement] = useState<P | null>(null);
52
-
53
- const modifiers: Array<Modifier<'sameWidth' | 'offset'>> = [];
54
-
55
- if (sameWidth) {
56
- modifiers.push(sameWidthModifier);
57
- }
58
-
59
- if (offset) {
60
- modifiers.push(getOffsetModifier(offset));
61
- }
62
-
63
- const { styles, attributes } = usePopper(referenceElement, popperElement, {
64
- placement,
65
- strategy: 'fixed',
66
- modifiers,
67
- });
68
-
69
- return {
70
- setReferenceElement,
71
- setPopperElement,
72
- popperProps: {
73
- style: styles.popper,
74
- ...attributes.popper,
75
- },
76
- };
77
- }
@@ -1,11 +0,0 @@
1
- import { QueryClient } from '@tanstack/react-query';
2
-
3
- export const queryClient = new QueryClient({
4
- defaultOptions: {
5
- queries: {
6
- refetchOnMount: false,
7
- refetchOnReconnect: false,
8
- refetchOnWindowFocus: false,
9
- },
10
- },
11
- });