@vygruppen/spor-react 6.2.0 → 6.2.1

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 (13) hide show
  1. package/.turbo/turbo-build.log +10 -10
  2. package/CHANGELOG.md +8 -0
  3. package/dist/{CountryCodeSelect-QBDQ3HTF.mjs → CountryCodeSelect-CJUALQVN.mjs} +1 -1
  4. package/dist/{chunk-UIM4MXLY.mjs → chunk-UHSKIIAP.mjs} +21 -38
  5. package/dist/index.d.mts +50 -30
  6. package/dist/index.d.ts +50 -30
  7. package/dist/index.js +25 -44
  8. package/dist/index.mjs +1 -1
  9. package/package.json +1 -1
  10. package/src/datepicker/DateField.tsx +2 -7
  11. package/src/input/NumericStepper.tsx +4 -8
  12. package/src/theme/components/card.ts +9 -16
  13. package/tsconfig.json +2 -2
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @vygruppen/spor-react@6.2.0 build
2
+ > @vygruppen/spor-react@6.2.1 build
3
3
  > tsup src/index.tsx --dts --treeshake --format cjs,esm
4
4
 
5
5
  CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
8
8
  CLI Target: node16
9
9
  CJS Build start
10
10
  ESM Build start
11
+ "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UHSKIIAP.mjs".
11
12
  "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
12
- "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UIM4MXLY.mjs".
13
13
  DTS Build start
14
- CJS dist/index.js 507.54 KB
15
- CJS ⚡️ Build success in 2262ms
16
14
  ESM dist/index.mjs 2.16 KB
17
- ESM dist/CountryCodeSelect-QBDQ3HTF.mjs 1.19 KB
18
- ESM dist/chunk-UIM4MXLY.mjs 398.07 KB
19
- ESM ⚡️ Build success in 2262ms
20
- DTS ⚡️ Build success in 12347ms
21
- DTS dist/index.d.ts 266.83 KB
22
- DTS dist/index.d.mts 266.83 KB
15
+ ESM dist/CountryCodeSelect-CJUALQVN.mjs 1.19 KB
16
+ ESM dist/chunk-UHSKIIAP.mjs 397.75 KB
17
+ ESM ⚡️ Build success in 2305ms
18
+ CJS dist/index.js 507.10 KB
19
+ CJS ⚡️ Build success in 2306ms
20
+ DTS ⚡️ Build success in 12726ms
21
+ DTS dist/index.d.ts 267.02 KB
22
+ DTS dist/index.d.mts 267.02 KB
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @vygruppen/spor-react
2
2
 
3
+ ## 6.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - e97dddd: Card, NumericStepper: Fix a bug with the focus styles that showed up when it shouldn't have.
8
+
9
+ DatePicker, DateRangePicker: Fix a bug where you wouldn't automatically jump to the next field once a field was filled out
10
+
3
11
  ## 6.2.0
4
12
 
5
13
  ### Minor Changes
package/dist/{CountryCodeSelect-QBDQ3HTF.mjs → CountryCodeSelect-CJUALQVN.mjs} RENAMED
@@ -1,4 +1,4 @@
1
- import { createTexts, useTranslation, InfoSelect, Item } from './chunk-UIM4MXLY.mjs';
1
+ import { createTexts, useTranslation, InfoSelect, Item } from './chunk-UHSKIIAP.mjs';
2
2
  import React from 'react';
3
3
  import { getSupportedCallingCodes } from 'awesome-phonenumber';
4
4
 
package/dist/{chunk-UIM4MXLY.mjs → chunk-UHSKIIAP.mjs} RENAMED
@@ -2006,15 +2006,7 @@ var DateField = forwardRef$1(
2006
2006
  paddingTop: "2px"
2007
2007
  },
2008
2008
  props.label
2009
- ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(
2010
- DateTimeSegment,
2011
- {
2012
- ref: i === 0 ? ref : void 0,
2013
- key: i,
2014
- segment,
2015
- state: state2
2016
- }
2017
- ))), /* @__PURE__ */ React69__default.createElement(
2009
+ ), /* @__PURE__ */ React69__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React69__default.createElement(
2018
2010
  "input",
2019
2011
  {
2020
2012
  type: "hidden",
@@ -3104,13 +3096,6 @@ var getBoxShadowString = (args) => {
3104
3096
  return allShadows.join(", ");
3105
3097
  };
3106
3098
 
3107
- // src/theme/utils/focus-utils.ts
3108
- var focusVisible = ({ notFocus, focus }) => ({
3109
- _focus: focus,
3110
- _focusVisible: focus,
3111
- "&[data-focus]:not([data-focus-visible])": notFocus
3112
- });
3113
-
3114
3099
  // src/input/NumericStepper.tsx
3115
3100
  function NumericStepper({
3116
3101
  name: nameProp,
@@ -3232,12 +3217,9 @@ var VerySmallButton = (props) => {
3232
3217
  size: "xs",
3233
3218
  minWidth: "24px",
3234
3219
  minHeight: "24px",
3235
- sx: focusVisible({
3236
- notFocus: { boxShadow: "none" },
3237
- focus: {
3238
- boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3239
- }
3240
- }),
3220
+ _focusVisible: {
3221
+ boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3222
+ },
3241
3223
  ...props
3242
3224
  }
3243
3225
  );
@@ -3437,7 +3419,7 @@ var texts14 = createTexts({
3437
3419
  sv: "Telefonnummer"
3438
3420
  }
3439
3421
  });
3440
- var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QBDQ3HTF.mjs'));
3422
+ var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-CJUALQVN.mjs'));
3441
3423
  var Radio = forwardRef((props, ref) => {
3442
3424
  return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
3443
3425
  });
@@ -9764,6 +9746,13 @@ var styles2 = {
9764
9746
  }
9765
9747
  })
9766
9748
  };
9749
+
9750
+ // src/theme/utils/focus-utils.ts
9751
+ var focusVisible = ({ notFocus, focus }) => ({
9752
+ _focus: focus,
9753
+ _focusVisible: focus,
9754
+ "&[data-focus]:not([data-focus-visible])": notFocus
9755
+ });
9767
9756
  var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
9768
9757
  var config3 = helpers.defineMultiStyleConfig({
9769
9758
  baseStyle: (props) => ({
@@ -10324,21 +10313,15 @@ var config7 = defineStyleConfig$1({
10324
10313
  ...getColorSchemeClickableProps(props),
10325
10314
  _hover: getColorSchemeHoverProps(props),
10326
10315
  _active: getColorSchemeActiveProps(props),
10327
- ...focusVisible({
10328
- focus: {
10329
- boxShadow: getBoxShadowString({
10330
- borderColor: mode("greenHaze", "azure")(props),
10331
- borderWidth: 2,
10332
- isInset: false
10333
- }),
10334
- outline: "none",
10335
- _active: getColorSchemeActiveProps(props)
10336
- },
10337
- notFocus: {
10338
- ...getColorSchemeClickableProps(props),
10339
- _active: getColorSchemeActiveProps(props)
10340
- }
10341
- }),
10316
+ _focusVisible: {
10317
+ boxShadow: getBoxShadowString({
10318
+ borderColor: mode("greenHaze", "azure")(props),
10319
+ borderWidth: 2,
10320
+ isInset: false
10321
+ }),
10322
+ outline: "none",
10323
+ _active: getColorSchemeActiveProps(props)
10324
+ },
10342
10325
  _disabled: {
10343
10326
  backgroundColor: "platinum",
10344
10327
  boxShadow: getBoxShadowString({
package/dist/index.d.mts CHANGED
@@ -2476,15 +2476,6 @@ declare const theme: {
2476
2476
  Card: {
2477
2477
  baseStyle?: ((props: any) => {
2478
2478
  "button&, a&, label&, &.is-clickable": {
2479
- _disabled: {
2480
- backgroundColor: string;
2481
- boxShadow: string;
2482
- color: string;
2483
- pointerEvents: string;
2484
- };
2485
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2486
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2487
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2488
2479
  _hover: {
2489
2480
  backgroundColor: string;
2490
2481
  boxShadow: string;
@@ -2496,18 +2487,23 @@ declare const theme: {
2496
2487
  backgroundColor: string;
2497
2488
  boxShadow: string;
2498
2489
  };
2499
- boxShadow: string;
2500
- backgroundColor?: undefined;
2501
- } | {
2490
+ _focusVisible: {
2491
+ boxShadow: string;
2492
+ outline: string;
2493
+ _active: {
2494
+ backgroundColor: string;
2495
+ boxShadow: string;
2496
+ };
2497
+ };
2502
2498
  _disabled: {
2503
2499
  backgroundColor: string;
2504
2500
  boxShadow: string;
2505
2501
  color: string;
2506
2502
  pointerEvents: string;
2507
2503
  };
2508
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2509
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2510
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2504
+ boxShadow: string;
2505
+ backgroundColor?: undefined;
2506
+ } | {
2511
2507
  _hover: {
2512
2508
  backgroundColor: string;
2513
2509
  boxShadow: string;
@@ -2519,6 +2515,20 @@ declare const theme: {
2519
2515
  backgroundColor: string;
2520
2516
  boxShadow: string;
2521
2517
  };
2518
+ _focusVisible: {
2519
+ boxShadow: string;
2520
+ outline: string;
2521
+ _active: {
2522
+ backgroundColor: string;
2523
+ boxShadow: string;
2524
+ };
2525
+ };
2526
+ _disabled: {
2527
+ backgroundColor: string;
2528
+ boxShadow: string;
2529
+ color: string;
2530
+ pointerEvents: string;
2531
+ };
2522
2532
  backgroundColor: string;
2523
2533
  boxShadow: string;
2524
2534
  };
@@ -2534,15 +2544,6 @@ declare const theme: {
2534
2544
  borderRadius: string;
2535
2545
  } | {
2536
2546
  "button&, a&, label&, &.is-clickable": {
2537
- _disabled: {
2538
- backgroundColor: string;
2539
- boxShadow: string;
2540
- color: string;
2541
- pointerEvents: string;
2542
- };
2543
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2544
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2545
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2546
2547
  _hover: {
2547
2548
  backgroundColor: string;
2548
2549
  boxShadow: string;
@@ -2554,18 +2555,23 @@ declare const theme: {
2554
2555
  backgroundColor: string;
2555
2556
  boxShadow: string;
2556
2557
  };
2557
- boxShadow: string;
2558
- backgroundColor?: undefined;
2559
- } | {
2558
+ _focusVisible: {
2559
+ boxShadow: string;
2560
+ outline: string;
2561
+ _active: {
2562
+ backgroundColor: string;
2563
+ boxShadow: string;
2564
+ };
2565
+ };
2560
2566
  _disabled: {
2561
2567
  backgroundColor: string;
2562
2568
  boxShadow: string;
2563
2569
  color: string;
2564
2570
  pointerEvents: string;
2565
2571
  };
2566
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2567
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2568
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2572
+ boxShadow: string;
2573
+ backgroundColor?: undefined;
2574
+ } | {
2569
2575
  _hover: {
2570
2576
  backgroundColor: string;
2571
2577
  boxShadow: string;
@@ -2577,6 +2583,20 @@ declare const theme: {
2577
2583
  backgroundColor: string;
2578
2584
  boxShadow: string;
2579
2585
  };
2586
+ _focusVisible: {
2587
+ boxShadow: string;
2588
+ outline: string;
2589
+ _active: {
2590
+ backgroundColor: string;
2591
+ boxShadow: string;
2592
+ };
2593
+ };
2594
+ _disabled: {
2595
+ backgroundColor: string;
2596
+ boxShadow: string;
2597
+ color: string;
2598
+ pointerEvents: string;
2599
+ };
2580
2600
  backgroundColor: string;
2581
2601
  boxShadow: string;
2582
2602
  };
package/dist/index.d.ts CHANGED
@@ -2476,15 +2476,6 @@ declare const theme: {
2476
2476
  Card: {
2477
2477
  baseStyle?: ((props: any) => {
2478
2478
  "button&, a&, label&, &.is-clickable": {
2479
- _disabled: {
2480
- backgroundColor: string;
2481
- boxShadow: string;
2482
- color: string;
2483
- pointerEvents: string;
2484
- };
2485
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2486
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2487
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2488
2479
  _hover: {
2489
2480
  backgroundColor: string;
2490
2481
  boxShadow: string;
@@ -2496,18 +2487,23 @@ declare const theme: {
2496
2487
  backgroundColor: string;
2497
2488
  boxShadow: string;
2498
2489
  };
2499
- boxShadow: string;
2500
- backgroundColor?: undefined;
2501
- } | {
2490
+ _focusVisible: {
2491
+ boxShadow: string;
2492
+ outline: string;
2493
+ _active: {
2494
+ backgroundColor: string;
2495
+ boxShadow: string;
2496
+ };
2497
+ };
2502
2498
  _disabled: {
2503
2499
  backgroundColor: string;
2504
2500
  boxShadow: string;
2505
2501
  color: string;
2506
2502
  pointerEvents: string;
2507
2503
  };
2508
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2509
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2510
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2504
+ boxShadow: string;
2505
+ backgroundColor?: undefined;
2506
+ } | {
2511
2507
  _hover: {
2512
2508
  backgroundColor: string;
2513
2509
  boxShadow: string;
@@ -2519,6 +2515,20 @@ declare const theme: {
2519
2515
  backgroundColor: string;
2520
2516
  boxShadow: string;
2521
2517
  };
2518
+ _focusVisible: {
2519
+ boxShadow: string;
2520
+ outline: string;
2521
+ _active: {
2522
+ backgroundColor: string;
2523
+ boxShadow: string;
2524
+ };
2525
+ };
2526
+ _disabled: {
2527
+ backgroundColor: string;
2528
+ boxShadow: string;
2529
+ color: string;
2530
+ pointerEvents: string;
2531
+ };
2522
2532
  backgroundColor: string;
2523
2533
  boxShadow: string;
2524
2534
  };
@@ -2534,15 +2544,6 @@ declare const theme: {
2534
2544
  borderRadius: string;
2535
2545
  } | {
2536
2546
  "button&, a&, label&, &.is-clickable": {
2537
- _disabled: {
2538
- backgroundColor: string;
2539
- boxShadow: string;
2540
- color: string;
2541
- pointerEvents: string;
2542
- };
2543
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2544
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2545
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2546
2547
  _hover: {
2547
2548
  backgroundColor: string;
2548
2549
  boxShadow: string;
@@ -2554,18 +2555,23 @@ declare const theme: {
2554
2555
  backgroundColor: string;
2555
2556
  boxShadow: string;
2556
2557
  };
2557
- boxShadow: string;
2558
- backgroundColor?: undefined;
2559
- } | {
2558
+ _focusVisible: {
2559
+ boxShadow: string;
2560
+ outline: string;
2561
+ _active: {
2562
+ backgroundColor: string;
2563
+ boxShadow: string;
2564
+ };
2565
+ };
2560
2566
  _disabled: {
2561
2567
  backgroundColor: string;
2562
2568
  boxShadow: string;
2563
2569
  color: string;
2564
2570
  pointerEvents: string;
2565
2571
  };
2566
- _focus: _chakra_ui_styled_system.SystemStyleObject;
2567
- _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
2568
- "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
2572
+ boxShadow: string;
2573
+ backgroundColor?: undefined;
2574
+ } | {
2569
2575
  _hover: {
2570
2576
  backgroundColor: string;
2571
2577
  boxShadow: string;
@@ -2577,6 +2583,20 @@ declare const theme: {
2577
2583
  backgroundColor: string;
2578
2584
  boxShadow: string;
2579
2585
  };
2586
+ _focusVisible: {
2587
+ boxShadow: string;
2588
+ outline: string;
2589
+ _active: {
2590
+ backgroundColor: string;
2591
+ boxShadow: string;
2592
+ };
2593
+ };
2594
+ _disabled: {
2595
+ backgroundColor: string;
2596
+ boxShadow: string;
2597
+ color: string;
2598
+ pointerEvents: string;
2599
+ };
2580
2600
  backgroundColor: string;
2581
2601
  boxShadow: string;
2582
2602
  };
package/dist/index.js CHANGED
@@ -1668,15 +1668,7 @@ var init_DateField = __esm({
1668
1668
  paddingTop: "2px"
1669
1669
  },
1670
1670
  props.label
1671
- ), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__namespace.default.createElement(
1672
- DateTimeSegment,
1673
- {
1674
- ref: i === 0 ? ref : void 0,
1675
- key: i,
1676
- segment,
1677
- state: state2
1678
- }
1679
- ))), /* @__PURE__ */ React69__namespace.default.createElement(
1671
+ ), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React69__namespace.default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React69__namespace.default.createElement(
1680
1672
  "input",
1681
1673
  {
1682
1674
  type: "hidden",
@@ -3672,18 +3664,6 @@ var init_box_shadow_utils = __esm({
3672
3664
  };
3673
3665
  }
3674
3666
  });
3675
-
3676
- // src/theme/utils/focus-utils.ts
3677
- var focusVisible;
3678
- var init_focus_utils = __esm({
3679
- "src/theme/utils/focus-utils.ts"() {
3680
- focusVisible = ({ notFocus, focus }) => ({
3681
- _focus: focus,
3682
- _focusVisible: focus,
3683
- "&[data-focus]:not([data-focus-visible])": notFocus
3684
- });
3685
- }
3686
- });
3687
3667
  function NumericStepper({
3688
3668
  name: nameProp,
3689
3669
  id: idProp,
@@ -3801,7 +3781,6 @@ var init_NumericStepper = __esm({
3801
3781
  "src/input/NumericStepper.tsx"() {
3802
3782
  init_src();
3803
3783
  init_box_shadow_utils();
3804
- init_focus_utils();
3805
3784
  VerySmallButton = (props) => {
3806
3785
  return /* @__PURE__ */ React69__namespace.default.createElement(
3807
3786
  exports.IconButton,
@@ -3810,12 +3789,9 @@ var init_NumericStepper = __esm({
3810
3789
  size: "xs",
3811
3790
  minWidth: "24px",
3812
3791
  minHeight: "24px",
3813
- sx: focusVisible({
3814
- notFocus: { boxShadow: "none" },
3815
- focus: {
3816
- boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3817
- }
3818
- }),
3792
+ _focusVisible: {
3793
+ boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
3794
+ },
3819
3795
  ...props
3820
3796
  }
3821
3797
  );
@@ -11172,6 +11148,18 @@ var init_foundations = __esm({
11172
11148
  init_styles();
11173
11149
  }
11174
11150
  });
11151
+
11152
+ // src/theme/utils/focus-utils.ts
11153
+ var focusVisible;
11154
+ var init_focus_utils = __esm({
11155
+ "src/theme/utils/focus-utils.ts"() {
11156
+ focusVisible = ({ notFocus, focus }) => ({
11157
+ _focus: focus,
11158
+ _focusVisible: focus,
11159
+ "&[data-focus]:not([data-focus-visible])": notFocus
11160
+ });
11161
+ }
11162
+ });
11175
11163
  var helpers, config3, accordion_default;
11176
11164
  var init_accordion2 = __esm({
11177
11165
  "src/theme/components/accordion.ts"() {
@@ -11791,7 +11779,6 @@ var init_card2 = __esm({
11791
11779
  "src/theme/components/card.ts"() {
11792
11780
  init_foundations();
11793
11781
  init_box_shadow_utils();
11794
- init_focus_utils();
11795
11782
  config7 = react.defineStyleConfig({
11796
11783
  baseStyle: (props) => ({
11797
11784
  appearance: "none",
@@ -11807,21 +11794,15 @@ var init_card2 = __esm({
11807
11794
  ...getColorSchemeClickableProps(props),
11808
11795
  _hover: getColorSchemeHoverProps(props),
11809
11796
  _active: getColorSchemeActiveProps(props),
11810
- ...focusVisible({
11811
- focus: {
11812
- boxShadow: getBoxShadowString({
11813
- borderColor: themeTools.mode("greenHaze", "azure")(props),
11814
- borderWidth: 2,
11815
- isInset: false
11816
- }),
11817
- outline: "none",
11818
- _active: getColorSchemeActiveProps(props)
11819
- },
11820
- notFocus: {
11821
- ...getColorSchemeClickableProps(props),
11822
- _active: getColorSchemeActiveProps(props)
11823
- }
11824
- }),
11797
+ _focusVisible: {
11798
+ boxShadow: getBoxShadowString({
11799
+ borderColor: themeTools.mode("greenHaze", "azure")(props),
11800
+ borderWidth: 2,
11801
+ isInset: false
11802
+ }),
11803
+ outline: "none",
11804
+ _active: getColorSchemeActiveProps(props)
11805
+ },
11825
11806
  _disabled: {
11826
11807
  backgroundColor: "platinum",
11827
11808
  boxShadow: getBoxShadowString({
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UIM4MXLY.mjs';
1
+ export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-UHSKIIAP.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vygruppen/spor-react",
3
- "version": "6.2.0",
3
+ "version": "6.2.1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
package/src/datepicker/DateField.tsx CHANGED
@@ -52,14 +52,9 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
52
52
  {props.label}
53
53
  </FormLabel>
54
54
  )}
55
- <Flex {...fieldProps} paddingTop="3" paddingBottom="0.5">
55
+ <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
56
56
  {state.segments.map((segment, i) => (
57
- <DateTimeSegment
58
- ref={i === 0 ? ref : undefined}
59
- key={i}
60
- segment={segment}
61
- state={state}
62
- />
57
+ <DateTimeSegment key={i} segment={segment} state={state} />
63
58
  ))}
64
59
  </Flex>
65
60
  <input
package/src/input/NumericStepper.tsx CHANGED
@@ -14,7 +14,6 @@ import {
14
14
  useTranslation,
15
15
  } from "..";
16
16
  import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
17
- import { focusVisible } from "../theme/utils/focus-utils";
18
17
 
19
18
  type NumericStepperProps = {
20
19
  /** The name of the input field */
@@ -197,13 +196,10 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
197
196
  size="xs"
198
197
  minWidth="24px"
199
198
  minHeight="24px"
200
- sx={focusVisible({
201
- notFocus: { boxShadow: "none" },
202
- focus: {
203
- boxShadow:
204
- "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
205
- },
206
- })}
199
+ _focusVisible={{
200
+ boxShadow:
201
+ "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
202
+ }}
207
203
  {...props}
208
204
  />
209
205
  );
package/src/theme/components/card.ts CHANGED
@@ -2,7 +2,6 @@ import { defineStyleConfig } from "@chakra-ui/react";
2
2
  import { mode } from "@chakra-ui/theme-tools";
3
3
  import { colors } from "../foundations";
4
4
  import { getBoxShadowString } from "../utils/box-shadow-utils";
5
- import { focusVisible } from "../utils/focus-utils";
6
5
 
7
6
  const config = defineStyleConfig({
8
7
  baseStyle: (props: any) => ({
@@ -20,21 +19,15 @@ const config = defineStyleConfig({
20
19
  ...getColorSchemeClickableProps(props),
21
20
  _hover: getColorSchemeHoverProps(props),
22
21
  _active: getColorSchemeActiveProps(props),
23
- ...focusVisible({
24
- focus: {
25
- boxShadow: getBoxShadowString({
26
- borderColor: mode("greenHaze", "azure")(props),
27
- borderWidth: 2,
28
- isInset: false,
29
- }),
30
- outline: "none",
31
- _active: getColorSchemeActiveProps(props),
32
- },
33
- notFocus: {
34
- ...getColorSchemeClickableProps(props),
35
- _active: getColorSchemeActiveProps(props),
36
- },
37
- }),
22
+ _focusVisible: {
23
+ boxShadow: getBoxShadowString({
24
+ borderColor: mode("greenHaze", "azure")(props),
25
+ borderWidth: 2,
26
+ isInset: false,
27
+ }),
28
+ outline: "none",
29
+ _active: getColorSchemeActiveProps(props),
30
+ },
38
31
  _disabled: {
39
32
  backgroundColor: "platinum",
40
33
  boxShadow: getBoxShadowString({
package/tsconfig.json CHANGED
@@ -3,6 +3,6 @@
3
3
  "include": ["."],
4
4
  "exclude": ["dist", "build", "node_modules"],
5
5
  "compilerOptions": {
6
- "rootDir": "."
7
- }
6
+ "rootDir": ".",
7
+ },
8
8
  }