@spscommerce/ds-react 7.1.2 → 7.1.4

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 (4) hide show
  1. package/lib/fieldset/SpsFieldset.d.ts +2 -1
  2. package/lib/index.cjs.js +1 -1
  3. package/lib/index.es.js +30 -28
  4. package/package.json +12 -12
package/lib/fieldset/SpsFieldset.d.ts CHANGED
@@ -13,5 +13,6 @@ export declare type SpsFieldsetProps = React.PropsWithChildren<SpsGlobalPropType
13
13
  enabled?: boolean;
14
14
  onToggled?: (isEnabled: boolean) => void;
15
15
  tooltip?: string;
16
+ applyNestedStyles?: boolean;
16
17
  }> & React.HTMLAttributes<HTMLDivElement>;
17
- export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, "data-testid": testId, }: SpsFieldsetProps): JSX.Element;
18
+ export declare function SpsFieldset({ children, className, errors, formArray, formGroup, formMeta, legend, unsafelyReplaceClassName, optional, enabled, onToggled, tooltip, applyNestedStyles, "data-testid": testId, }: SpsFieldsetProps): JSX.Element;
package/lib/index.cjs.js CHANGED
@@ -2317,7 +2317,7 @@ var a=n.defineLocale("zh-tw",{months:"\u4E00\u6708_\u4E8C\u6708_\u4E09\u6708_\u5
2317
2317
  </SpsTable>
2318
2318
  )
2319
2319
  }
2320
- `}}}},qD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function Ci(e){const{options:t,className:n,checked:a,onChange:s,indeterminate:i,disabled:l,"data-testid":c,...u}=e,p=$("sps-checkbox-dropdown",n);return r.createElement("span",{className:p,"data-testid":c,...u},r.createElement(kn,{indeterminate:i,checked:a,disabled:l,onChange:s,inline:!0,"data-testid":`${c}__checkbox`}),r.createElement(xn,{disabled:l,options:t,icon:V.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(Ci,{props:qD,displayName:"SpsCheckboxDropdown"});const JD={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string"};function Di({children:e,className:t,errors:n,formArray:a,formGroup:s,formMeta:i,legend:l,unsafelyReplaceClassName:c,optional:u=!1,enabled:p=!1,onToggled:f,tooltip:m,"data-testid":h}){const S=s||a,y=r.useRef(null),w=r.useRef(null),[C,D]=r.useState(Ee.HIDDEN),[N,I]=r.useState(!1),[b,k]=r.useState(p);Po(()=>{f==null||f(b)},[b]),r.useEffect(()=>{if(S||i){const L=S&&S.isFocused()||i&&i.isFocused();!N&&L?D(Ee.VISIBLE):N&&!L&&D(Ee.HIDDEN),I(L||!1)}});const O=$(c||"sps-fieldset",(S&&!S.isPristine()&&S.invalid||i&&(!i.isValid()||!i.contentsAreValid()))&&"sps-fieldset--error",t,u&&!b&&"sps-fieldset--collapsed");function x(){D(C===Ee.VISIBLE?Ee.HIDDEN:Ee.VISIBLE)}return r.createElement("div",{className:"sps-fieldset-container"},r.createElement("fieldset",{className:O,"data-testid":h},r.createElement("legend",{className:"sps-fieldset__legend",ref:y,onMouseEnter:()=>D(Ee.VISIBLE),onMouseLeave:()=>D(Ee.DELAYED_HIDDEN),onClick:x},u&&r.createElement(kn,{checked:b,className:"d-inline-flex pr-1",onChange:()=>{k(!b)},"data-testid":`${h}__checkbox`}),l,m&&r.createElement("span",{className:"sps-fieldset__legend-icon",ref:w},r.createElement(kt,{icon:V.SpsIcon.INFO_CIRCLE,"data-testid":`${h}__info-icon`}))),m&&r.createElement(ht,{for:w},m),r.createElement(ht,{for:y,kind:V.TooltipKind.ERROR,showOn:V.TooltipShowTrigger.MANUAL,isShown:C},lt(n)),e))}Object.assign(Di,{props:JD,displayName:"SpsFieldset"});const Xp={basic:{label:"Basic Fieldsets",description:"info about basic fieldsets",examples:{basic:{react:E.code`
2320
+ `}}}},qD={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function Ci(e){const{options:t,className:n,checked:a,onChange:s,indeterminate:i,disabled:l,"data-testid":c,...u}=e,p=$("sps-checkbox-dropdown",n);return r.createElement("span",{className:p,"data-testid":c,...u},r.createElement(kn,{indeterminate:i,checked:a,disabled:l,onChange:s,inline:!0,"data-testid":`${c}__checkbox`}),r.createElement(xn,{disabled:l,options:t,icon:V.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(Ci,{props:qD,displayName:"SpsCheckboxDropdown"});const JD={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string",applyNestedStyles:"boolean"};function Di({children:e,className:t,errors:n,formArray:a,formGroup:s,formMeta:i,legend:l,unsafelyReplaceClassName:c,optional:u=!1,enabled:p=!1,onToggled:f,tooltip:m,applyNestedStyles:h,"data-testid":S}){const y=s||a,w=r.useRef(null),C=r.useRef(null),[D,N]=r.useState(Ee.HIDDEN),[I,b]=r.useState(!1),[k,O]=r.useState(p);Po(()=>{f==null||f(k)},[k]),r.useEffect(()=>{if(y||i){const A=y&&y.isFocused()||i&&i.isFocused();!I&&A?N(Ee.VISIBLE):I&&!A&&N(Ee.HIDDEN),b(A||!1)}});const x=$(c||h?"nested-styles-fieldset":"sps-fieldset",(y&&!y.isPristine()&&y.invalid||i&&(!i.isValid()||!i.contentsAreValid()))&&"sps-fieldset--error",t,u&&!k&&"sps-fieldset--collapsed");function L(){N(D===Ee.VISIBLE?Ee.HIDDEN:Ee.VISIBLE)}return r.createElement("div",{className:"sps-fieldset-container"},r.createElement("fieldset",{className:x,"data-testid":S},r.createElement("legend",{className:"sps-fieldset__legend",ref:w,onMouseEnter:()=>N(Ee.VISIBLE),onMouseLeave:()=>N(Ee.DELAYED_HIDDEN),onClick:L},u&&r.createElement(kn,{checked:k,className:"d-inline-flex pr-1",onChange:()=>{O(!k)},"data-testid":`${S}__checkbox`}),l,m&&r.createElement("span",{className:"sps-fieldset__legend-icon",ref:C},r.createElement(kt,{icon:V.SpsIcon.INFO_CIRCLE,"data-testid":`${S}__info-icon`}))),m&&r.createElement(ht,{for:C},m),r.createElement(ht,{for:w,kind:V.TooltipKind.ERROR,showOn:V.TooltipShowTrigger.MANUAL,isShown:D},lt(n)),e))}Object.assign(Di,{props:JD,displayName:"SpsFieldset"});const Xp={basic:{label:"Basic Fieldsets",description:"info about basic fieldsets",examples:{basic:{react:E.code`
2321
2321
  function DemoComponent() {
2322
2322
  const RADIO_OPTIONS = [
2323
2323
  { value: "a", label: "Option A" },
package/lib/index.es.js CHANGED
@@ -16261,7 +16261,8 @@ const CD = {
16261
16261
  optional: "boolean",
16262
16262
  enabled: "boolean",
16263
16263
  onToggled: "(isEnabled: boolean) => void",
16264
- tooltip: "string"
16264
+ tooltip: "string",
16265
+ applyNestedStyles: "boolean"
16265
16266
  };
16266
16267
  function cp({
16267
16268
  children: e,
@@ -16276,57 +16277,58 @@ function cp({
16276
16277
  enabled: p = !1,
16277
16278
  onToggled: f,
16278
16279
  tooltip: m,
16279
- "data-testid": h
16280
+ applyNestedStyles: h,
16281
+ "data-testid": b
16280
16282
  }) {
16281
- const b = s || a, y = r.useRef(null), w = r.useRef(null), [T, C] = r.useState(we.HIDDEN), [N, I] = r.useState(!1), [S, k] = r.useState(p);
16283
+ const y = s || a, w = r.useRef(null), T = r.useRef(null), [C, N] = r.useState(we.HIDDEN), [I, S] = r.useState(!1), [k, O] = r.useState(p);
16282
16284
  Od(() => {
16283
- f == null || f(S);
16284
- }, [S]), r.useEffect(() => {
16285
- if (b || i) {
16286
- const L = b && b.isFocused() || i && i.isFocused();
16287
- !N && L ? C(we.VISIBLE) : N && !L && C(we.HIDDEN), I(L || !1);
16285
+ f == null || f(k);
16286
+ }, [k]), r.useEffect(() => {
16287
+ if (y || i) {
16288
+ const A = y && y.isFocused() || i && i.isFocused();
16289
+ !I && A ? N(we.VISIBLE) : I && !A && N(we.HIDDEN), S(A || !1);
16288
16290
  }
16289
16291
  });
16290
- const O = $(
16291
- c || "sps-fieldset",
16292
- (b && !b.isPristine() && b.invalid || i && (!i.isValid() || !i.contentsAreValid())) && "sps-fieldset--error",
16292
+ const x = $(
16293
+ c || h ? "nested-styles-fieldset" : "sps-fieldset",
16294
+ (y && !y.isPristine() && y.invalid || i && (!i.isValid() || !i.contentsAreValid())) && "sps-fieldset--error",
16293
16295
  t,
16294
- u && !S && "sps-fieldset--collapsed"
16296
+ u && !k && "sps-fieldset--collapsed"
16295
16297
  );
16296
- function x() {
16297
- C(T === we.VISIBLE ? we.HIDDEN : we.VISIBLE);
16298
+ function L() {
16299
+ N(C === we.VISIBLE ? we.HIDDEN : we.VISIBLE);
16298
16300
  }
16299
16301
  return /* @__PURE__ */ r.createElement("div", {
16300
16302
  className: "sps-fieldset-container"
16301
16303
  }, /* @__PURE__ */ r.createElement("fieldset", {
16302
- className: O,
16303
- "data-testid": h
16304
+ className: x,
16305
+ "data-testid": b
16304
16306
  }, /* @__PURE__ */ r.createElement("legend", {
16305
16307
  className: "sps-fieldset__legend",
16306
- ref: y,
16307
- onMouseEnter: () => C(we.VISIBLE),
16308
- onMouseLeave: () => C(we.DELAYED_HIDDEN),
16309
- onClick: x
16308
+ ref: w,
16309
+ onMouseEnter: () => N(we.VISIBLE),
16310
+ onMouseLeave: () => N(we.DELAYED_HIDDEN),
16311
+ onClick: L
16310
16312
  }, u && /* @__PURE__ */ r.createElement(da, {
16311
- checked: S,
16313
+ checked: k,
16312
16314
  className: "d-inline-flex pr-1",
16313
16315
  onChange: () => {
16314
- k(!S);
16316
+ O(!k);
16315
16317
  },
16316
- "data-testid": `${h}__checkbox`
16318
+ "data-testid": `${b}__checkbox`
16317
16319
  }), l, m && /* @__PURE__ */ r.createElement("span", {
16318
16320
  className: "sps-fieldset__legend-icon",
16319
- ref: w
16321
+ ref: T
16320
16322
  }, /* @__PURE__ */ r.createElement(Kt, {
16321
16323
  icon: je.INFO_CIRCLE,
16322
- "data-testid": `${h}__info-icon`
16324
+ "data-testid": `${b}__info-icon`
16323
16325
  }))), m && /* @__PURE__ */ r.createElement(It, {
16324
- for: w
16326
+ for: T
16325
16327
  }, m), /* @__PURE__ */ r.createElement(It, {
16326
- for: y,
16328
+ for: w,
16327
16329
  kind: Bt.ERROR,
16328
16330
  showOn: st.MANUAL,
16329
- isShown: T
16331
+ isShown: C
16330
16332
  }, Et(n)), e));
16331
16333
  }
16332
16334
  Object.assign(cp, {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@spscommerce/ds-react",
3
3
  "description": "SPS Design System React components",
4
- "version": "7.1.2",
4
+ "version": "7.1.4",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -34,11 +34,11 @@
34
34
  },
35
35
  "peerDependencies": {
36
36
  "@react-stately/collections": "^3.3.3",
37
- "@sps-woodland/illustrations": "7.1.2",
38
- "@sps-woodland/tabs": "7.1.2",
39
- "@spscommerce/ds-colors": "7.1.2",
40
- "@spscommerce/ds-shared": "7.1.2",
41
- "@spscommerce/positioning": "7.1.2",
37
+ "@sps-woodland/illustrations": "7.1.4",
38
+ "@sps-woodland/tabs": "7.1.4",
39
+ "@spscommerce/ds-colors": "7.1.4",
40
+ "@spscommerce/ds-shared": "7.1.4",
41
+ "@spscommerce/positioning": "7.1.4",
42
42
  "@spscommerce/utils": "^6.11.3",
43
43
  "moment": "^2.25.3",
44
44
  "moment-timezone": "^0.5.28",
@@ -52,11 +52,11 @@
52
52
  "@react-types/select": "^3.6.1",
53
53
  "@react-types/shared": "^3.8.0",
54
54
  "@react-types/tabs": "^3.0.1",
55
- "@sps-woodland/illustrations": "7.1.2",
56
- "@sps-woodland/tabs": "7.1.2",
57
- "@spscommerce/ds-colors": "7.1.2",
58
- "@spscommerce/ds-shared": "7.1.2",
59
- "@spscommerce/positioning": "7.1.2",
55
+ "@sps-woodland/illustrations": "7.1.4",
56
+ "@sps-woodland/tabs": "7.1.4",
57
+ "@spscommerce/ds-colors": "7.1.4",
58
+ "@spscommerce/ds-shared": "7.1.4",
59
+ "@spscommerce/positioning": "7.1.4",
60
60
  "@spscommerce/utils": "^6.12.1",
61
61
  "@testing-library/dom": "^8.17.1",
62
62
  "@testing-library/react": "^10.0.0",
@@ -70,7 +70,7 @@
70
70
  "raf-stub": "^2.0.2",
71
71
  "react": "^16.9.0",
72
72
  "react-dom": "^16.9.0",
73
- "test": "7.1.2"
73
+ "test": "7.1.4"
74
74
  },
75
75
  "scripts": {
76
76
  "build": "pnpm run build:js && pnpm run build:types",