@orangesix/react 1.1.0 → 1.2.2

package/style/scss/core/_mixins.scss

@@ -1,243 +1,243 @@
 @mixin icon-override($icon) {
-	&:before {
-		content: $icon;
-	}
+  &:before {
+    content: $icon;
+  }
 }
 
 @mixin focused() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: $focusShadow;
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $focusShadow;
 }
 
 @mixin focused-inset() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: inset $focusShadow;
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: inset $focusShadow;
 }
 
 @mixin focused-input() {
-	@include focused();
-	border-color: $inputFocusBorderColor;
+  @include focused();
+  border-color: $inputFocusBorderColor;
 }
 
 @mixin focused-listitem() {
-	outline: $focusOutline;
-	outline-offset: $focusOutlineOffset;
-	box-shadow: $inputListItemFocusShadow;
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $inputListItemFocusShadow;
 }
 
 @mixin invalid-input() {
-	border-color: $inputErrorBorderColor;
+  border-color: $inputErrorBorderColor;
 }
 
 @mixin menuitem-link {
-	> .p-menuitem-content {
-		color: $menuitemTextColor;
-		transition: $listItemTransition;
-		border-radius: $menuitemBorderRadius;
-
-		.p-menuitem-link {
-			color: $menuitemTextColor;
-			padding: $menuitemPadding;
-			user-select: none;
-
-			.p-menuitem-text {
-				color: $menuitemTextColor;
-			}
-
-			.p-menuitem-icon {
-				color: $menuitemIconColor;
-				margin-right: $inlineSpacing;
-			}
-
-			.p-submenu-icon {
-				color: $menuitemIconColor;
-			}
-		}
-	}
-
-	&.p-highlight {
-		> .p-menuitem-content {
-			color: $menuitemTextActiveColor;
-			background: $menuitemActiveBg;
-
-			.p-menuitem-link {
-				.p-menuitem-text {
-					color: $menuitemTextActiveColor;
-				}
-
-				.p-menuitem-icon,
-				.p-submenu-icon {
-					color: $menuitemIconActiveColor;
-				}
-			}
-		}
-
-		&.p-focus {
-			> .p-menuitem-content {
-				background: $menuitemActiveFocusBg;
-			}
-		}
-	}
-
-	&:not(.p-highlight):not(.p-disabled) {
-		&.p-focus {
-			> .p-menuitem-content {
-				color: $menuitemTextFocusColor;
-				background: $menuitemFocusBg;
-
-				.p-menuitem-link {
-					.p-menuitem-text {
-						color: $menuitemTextFocusColor;
-					}
-
-					.p-menuitem-icon,
-					.p-submenu-icon {
-						color: $menuitemIconFocusColor;
-					}
-				}
-			}
-		}
-
-		> .p-menuitem-content {
-			&:hover {
-				color: $menuitemTextHoverColor;
-				background: $menuitemHoverBg;
-
-				.p-menuitem-link {
-					.p-menuitem-text {
-						color: $menuitemTextHoverColor;
-					}
-
-					.p-menuitem-icon,
-					.p-submenu-icon {
-						color: $menuitemIconHoverColor;
-					}
-				}
-			}
-		}
-	}
+  > .p-menuitem-content {
+    color: $menuitemTextColor;
+    transition: $listItemTransition;
+    border-radius: $menuitemBorderRadius;
+
+    .p-menuitem-link {
+      color: $menuitemTextColor;
+      padding: $menuitemPadding;
+      user-select: none;
+
+      .p-menuitem-text {
+        color: $menuitemTextColor;
+      }
+
+      .p-menuitem-icon {
+        color: $menuitemIconColor;
+        margin-right: $inlineSpacing;
+      }
+
+      .p-submenu-icon {
+        color: $menuitemIconColor;
+      }
+    }
+  }
+
+  &.p-highlight {
+    > .p-menuitem-content {
+      color: $menuitemTextActiveColor;
+      background: $menuitemActiveBg;
+
+      .p-menuitem-link {
+        .p-menuitem-text {
+          color: $menuitemTextActiveColor;
+        }
+
+        .p-menuitem-icon,
+        .p-submenu-icon {
+          color: $menuitemIconActiveColor;
+        }
+      }
+    }
+
+    &.p-focus {
+      > .p-menuitem-content {
+        background: $menuitemActiveFocusBg;
+      }
+    }
+  }
+
+  &:not(.p-highlight):not(.p-disabled) {
+    &.p-focus {
+      > .p-menuitem-content {
+        color: $menuitemTextFocusColor;
+        background: $menuitemFocusBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $menuitemTextFocusColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $menuitemIconFocusColor;
+          }
+        }
+      }
+    }
+
+    > .p-menuitem-content {
+      &:hover {
+        color: $menuitemTextHoverColor;
+        background: $menuitemHoverBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $menuitemTextHoverColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $menuitemIconHoverColor;
+          }
+        }
+      }
+    }
+  }
 }
 
 @mixin horizontal-rootmenuitem-link {
-	> .p-menuitem-content {
-		color: $horizontalMenuRootMenuitemTextColor;
-		transition: $listItemTransition;
-		border-radius: $horizontalMenuRootMenuitemBorderRadius;
-
-		.p-menuitem-link {
-			padding: $horizontalMenuRootMenuitemPadding;
-			user-select: none;
-
-			.p-menuitem-text {
-				color: $horizontalMenuRootMenuitemTextColor;
-			}
-
-			.p-menuitem-icon {
-				color: $horizontalMenuRootMenuitemIconColor;
-				margin-right: $inlineSpacing;
-			}
-
-			.p-submenu-icon {
-				color: $horizontalMenuRootMenuitemIconColor;
-				margin-left: $inlineSpacing;
-			}
-		}
-	}
-
-	&:not(.p-highlight):not(.p-disabled) {
-		> .p-menuitem-content {
-			&:hover {
-				color: $horizontalMenuRootMenuitemTextHoverColor;
-				background: $horizontalMenuRootMenuitemHoverBg;
-
-				.p-menuitem-link {
-					.p-menuitem-text {
-						color: $horizontalMenuRootMenuitemTextHoverColor;
-					}
-
-					.p-menuitem-icon,
-					.p-submenu-icon {
-						color: $horizontalMenuRootMenuitemIconHoverColor;
-					}
-				}
-			}
-		}
-	}
+  > .p-menuitem-content {
+    color: $horizontalMenuRootMenuitemTextColor;
+    transition: $listItemTransition;
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+    .p-menuitem-link {
+      padding: $horizontalMenuRootMenuitemPadding;
+      user-select: none;
+
+      .p-menuitem-text {
+        color: $horizontalMenuRootMenuitemTextColor;
+      }
+
+      .p-menuitem-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-right: $inlineSpacing;
+      }
+
+      .p-submenu-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-left: $inlineSpacing;
+      }
+    }
+  }
+
+  &:not(.p-highlight):not(.p-disabled) {
+    > .p-menuitem-content {
+      &:hover {
+        color: $horizontalMenuRootMenuitemTextHoverColor;
+        background: $horizontalMenuRootMenuitemHoverBg;
+
+        .p-menuitem-link {
+          .p-menuitem-text {
+            color: $horizontalMenuRootMenuitemTextHoverColor;
+          }
+
+          .p-menuitem-icon,
+          .p-submenu-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+          }
+        }
+      }
+    }
+  }
 }
 
 @mixin placeholder {
-	::-webkit-input-placeholder {
-		@content;
-	}
-	:-moz-placeholder {
-		@content;
-	}
-	::-moz-placeholder {
-		@content;
-	}
-	:-ms-input-placeholder {
-		@content;
-	}
+  ::-webkit-input-placeholder {
+    @content;
+  }
+  :-moz-placeholder {
+    @content;
+  }
+  ::-moz-placeholder {
+    @content;
+  }
+  :-ms-input-placeholder {
+    @content;
+  }
 }
 
 @mixin scaledPadding($val, $scale) {
-	padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+  padding: nth($val, 1) * $scale nth($val, 2) * $scale;
 }
 
 @mixin scaledFontSize($val, $scale) {
-	font-size: $val * $scale;
+  font-size: #{$val * $scale} !important;
 }
 
 @mixin nested-submenu-indents($val, $index, $length) {
-	ul {
-		li {
-			a {
-				padding-left: $val * ($index + 1);
-			}
+  ul {
+    li {
+      a {
+        padding-left: $val * ($index + 1);
+      }
 
-			@if $index < $length {
-				@include nested-submenu-indents($val, $index + 2, $length);
-			}
-		}
-	}
+      @if $index < $length {
+        @include nested-submenu-indents($val, $index + 2, $length);
+      }
+    }
+  }
 }
 
 @mixin action-icon($enabled: true) {
-	width: $actionIconWidth;
-	height: $actionIconHeight;
-	color: $actionIconColor;
-	border: $actionIconBorder;
-	background: $actionIconBg;
-	border-radius: $actionIconBorderRadius;
-	transition: $actionIconTransition;
-
-	@if $enabled {
-		&:enabled:hover {
-			@include action-icon-hover();
-		}
-	} @else {
-		&:hover {
-			@include action-icon-hover();
-		}
-	}
-
-	&:focus-visible {
-		@include focused();
-	}
+  width: $actionIconWidth;
+  height: $actionIconHeight;
+  color: $actionIconColor;
+  border: $actionIconBorder;
+  background: $actionIconBg;
+  border-radius: $actionIconBorderRadius;
+  transition: $actionIconTransition;
+
+  @if $enabled {
+    &:enabled:hover {
+      @include action-icon-hover();
+    }
+  } @else {
+    &:hover {
+      @include action-icon-hover();
+    }
+  }
+
+  &:focus-visible {
+    @include focused();
+  }
 }
 
 @mixin action-icon-hover() {
-	color: $actionIconHoverColor;
-	border-color: $actionIconHoverBorderColor;
-	background: $actionIconHoverBg;
+  color: $actionIconHoverColor;
+  border-color: $actionIconHoverBorderColor;
+  background: $actionIconHoverBg;
 }
 
 @function tint($color, $percentage) {
-	@return mix(#fff, $color, $percentage);
+  @return mix(#fff, $color, $percentage);
 }
 
 @function shade($color, $percentage) {
-	@return mix(#000, $color, $percentage);
+  @return mix(#000, $color, $percentage);
 }

package/style/scss/core/_reset.scss

@@ -1,75 +1,76 @@
-* {
-	box-sizing: border-box;
-}
-
-.p-component {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: $fontSize;
-    font-weight: $fontWeight;
-}
-
-.p-component-overlay {
-    background-color: $maskBg;
-    transition-duration: $transitionDuration;
-}
-
-.p-disabled, .p-component:disabled {
-    opacity: $disabledOpacity;
-}
-
-.p-error {
-    color: $errorColor;
-}
-
-.p-text-secondary {
-    color: $textSecondaryColor;
-}
-
-.pi {
-    font-size: $primeIconFontSize;
-}
-
-.p-icon {
-    width: $primeIconFontSize;
-    height: $primeIconFontSize;
-}
-
-.p-link {
-    font-family: var(--font-family);
-    font-feature-settings: var(--font-feature-settings, normal);
-    font-size: $fontSize;
-    border-radius: $borderRadius;
-
-    &:focus-visible {
-        @include focused();
-    }
-}
-
-.p-component-overlay-enter {
-    animation: p-component-overlay-enter-animation 150ms forwards;
-}
-
-.p-component-overlay-leave {
-    animation: p-component-overlay-leave-animation 150ms forwards;
-}
-
-.p-component-overlay {
-    @keyframes p-component-overlay-enter-animation {
-        from {
-            background-color: transparent;
-        }
-        to {
-            background-color: var(--maskbg);
-        }
-    }
-    
-    @keyframes p-component-overlay-leave-animation {
-        from {
-            background-color: var(--maskbg);
-        }
-        to {
-            background-color: transparent;
-        }
-    }
+* {
+  box-sizing: border-box;
+}
+
+.p-component {
+  font-family: var(--font-family);
+  font-feature-settings: var(--font-feature-settings, normal);
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+  background-color: $maskBg;
+  transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+  opacity: $disabledOpacity;
+  background-color: $disabledBackground !important;
+}
+
+.p-error {
+  color: $errorColor;
+}
+
+.p-text-secondary {
+  color: $textSecondaryColor;
+}
+
+.pi {
+  font-size: $primeIconFontSize;
+}
+
+.p-icon {
+  width: $primeIconFontSize;
+  height: $primeIconFontSize;
+}
+
+.p-link {
+  font-family: var(--font-family);
+  font-feature-settings: var(--font-feature-settings, normal);
+  font-size: $fontSize;
+  border-radius: $borderRadius;
+
+  &:focus-visible {
+    @include focused();
+  }
+}
+
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
 }

package/switch/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("primereact/utils"),r=require("primereact/inputswitch");const a=({children:r,...a})=>{const n={size:`box-size-${a.size??"100"}`,direction:`box-direction-${a.direction??"row"}`,justify:void 0===a.justify?"":Array.isArray(a.justify)?a.justify?.join(" "):a.justify,align:void 0===a.align?"":Array.isArray(a.align)?a.align?.join(" "):a.align},s={className:t.classNames(["box",a.className??"",n.size,n.direction,n.justify,n.align]),style:a.css,id:a.id};return e.createElement("div",{...s},r)},n=({iconPrefix:t="bi bi-",...r})=>r.label&&e.createElement("p",{className:"form-label"},r.icon&&e.createElement("i",{className:t+r.icon+" me-1"}),r.label,r.required&&e.createElement("span",{className:"text-danger"},"*")),s=({errors:t,name:r,...a})=>a.mode&&"Controlled"!==a.mode?e.createElement("div",{className:t[r??""]?"invalid-feedback is-invalid":"","data-name":r??"",id:"j_feedback",style:{display:t[r??""]?"block":"none"}},t[r??""]?t[r??""].message:""):e.createElement("div",{"data-name":r,id:"j_feedback"});var l=e=>null==e;var i=e=>!l(e)&&!Array.isArray(e)&&(e=>"object"==typeof e)(e)&&!(e=>e instanceof Date)(e),o=e=>i(e)&&e.target?"checkbox"===e.target.type?e.target.checked:e.target.value:e,c=e=>{const t=e.constructor&&e.constructor.prototype;return i(t)&&t.hasOwnProperty("isPrototypeOf")},u="undefined"!=typeof window&&void 0!==window.HTMLElement&&"undefined"!=typeof document;function d(e){let t;const r=Array.isArray(e),a="undefined"!=typeof FileList&&e instanceof FileList;if(e instanceof Date)t=new Date(e);else if(e instanceof Set)t=new Set(e);else{if(u&&(e instanceof Blob||a)||!r&&!i(e))return e;if(t=r?[]:{},r||c(e))for(const r in e)e.hasOwnProperty(r)&&(t[r]=d(e[r]));else t=e}return t}var f=e=>Array.isArray(e)?e.filter(Boolean):[],m=e=>void 0===e,b=(e,t,r)=>{if(!t||!i(e))return r;const a=f(t.split(/[,[\].]+?/)).reduce(((e,t)=>l(e)?e:e[t]),e);return m(a)||a===e?m(e[t])?r:e[t]:a},y=e=>"boolean"==typeof e,g=(e,t,r)=>{let a=-1;const n=(e=>/^\w*$/.test(e))(t)?[t]:f(t.replace(/["|']|\]/g,"").split(/\.|\[/));const s=n.length,l=s-1;for(;++a<s;){const t=n[a];let s=r;if(a!==l){const r=e[t];s=i(r)||Array.isArray(r)?r:isNaN(+n[a+1])?{}:[]}if("__proto__"===t||"constructor"===t||"prototype"===t)return;e[t]=s,e=e[t]}return e};const p="blur",_="change",v="all",h=e.createContext(null),E=()=>e.useContext(h);var V=(e,t,r,a=!0)=>{const n={defaultValues:t._defaultValues};for(const s in e)Object.defineProperty(n,s,{get:()=>{const n=s;return t._proxyFormState[n]!==v&&(t._proxyFormState[n]=!a||v),r&&(r[n]=!0),e[n]}});return n},j=(e,t,r,a)=>{r(e);const{name:n,...s}=e;return i(l=s)&&!Object.keys(l).length||Object.keys(s).length>=Object.keys(t).length||Object.keys(s).find((e=>!0===t[e]));var l},x=(e,t,r)=>{return!e||!t||e===t||(a=e,Array.isArray(a)?a:[a]).some((e=>e&&(r?e===t:e.startsWith(t)||t.startsWith(e))));var a};function w(t){const r=e.useRef(t);r.current=t,e.useEffect((()=>{const e=!t.disabled&&r.current.subject&&r.current.subject.subscribe({next:r.current.next});return()=>{e&&e.unsubscribe()}}),[t.disabled])}var A=(e,t,r,a,n)=>"string"==typeof e?b(r,e,n):Array.isArray(e)?e.map((e=>b(r,e))):r;function F(t){const r=E(),{name:a,disabled:n,control:s=r.control,shouldUnregister:l}=t,i=((e,t)=>e.has((e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e)(t)))(s._names.array,a),c=function(t){const r=E(),{control:a=r.control,name:n,defaultValue:s,disabled:l,exact:i}=t||{},o=e.useRef(n);o.current=n,w({disabled:l,subject:a._subjects.values,next:e=>{x(o.current,e.name,i)&&u(d(A(o.current,a._names,e.values||a._formValues,!1,s)))}});const[c,u]=e.useState(a._getWatch(n,s));return e.useEffect((()=>a._removeUnmounted())),c}({control:s,name:a,defaultValue:b(s._formValues,a,b(s._defaultValues,a,t.defaultValue)),exact:!0}),u=function(t){const r=E(),{control:a=r.control,disabled:n,name:s,exact:l}=t||{},[i,o]=e.useState(a._formState),c=e.useRef(!0),u=e.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1}),d=e.useRef(s);return d.current=s,w({disabled:n,next:e=>c.current&&x(d.current,e.name,l)&&j(e,u.current,a._updateFormState)&&o({...a._formState,...e}),subject:a._subjects.state}),e.useEffect((()=>(c.current=!0,u.current.isValid&&a._updateValid(!0),()=>{c.current=!1})),[a]),e.useMemo((()=>V(i,a,u.current,!1)),[i,a])}({control:s,name:a,exact:!0}),f=e.useRef(s.register(a,{...t.rules,value:c,...y(t.disabled)?{disabled:t.disabled}:{}})),v=e.useMemo((()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!b(u.errors,a)},isDirty:{enumerable:!0,get:()=>!!b(u.dirtyFields,a)},isTouched:{enumerable:!0,get:()=>!!b(u.touchedFields,a)},isValidating:{enumerable:!0,get:()=>!!b(u.validatingFields,a)},error:{enumerable:!0,get:()=>b(u.errors,a)}})),[u,a]),h=e.useMemo((()=>({name:a,value:c,...y(n)||u.disabled?{disabled:u.disabled||n}:{},onChange:e=>f.current.onChange({target:{value:o(e),name:a},type:_}),onBlur:()=>f.current.onBlur({target:{value:b(s._formValues,a),name:a},type:p}),ref:e=>{const t=b(s._fields,a);t&&e&&(t._f.ref={focus:()=>e.focus(),select:()=>e.select(),setCustomValidity:t=>e.setCustomValidity(t),reportValidity:()=>e.reportValidity()})}})),[a,s._formValues,n,u.disabled,c,s._fields]);return e.useEffect((()=>{const e=s._options.shouldUnregister||l,t=(e,t)=>{const r=b(s._fields,e);r&&r._f&&(r._f.mount=t)};if(t(a,!0),e){const e=d(b(s._options.defaultValues,a));g(s._defaultValues,a,e),m(b(s._formValues,a))&&g(s._formValues,a,e)}return!i&&s.register(a),()=>{(i?e&&!s._state.action:e)?s.unregister(a):t(a,!1)}}),[a,s,i,l]),e.useEffect((()=>{s._updateDisabledField({disabled:n,fields:s._fields,name:a})}),[n,a,s]),e.useMemo((()=>({field:h,formState:u,fieldState:v})),[h,u,v])}const N=e=>e.render(F(e));function S({...t}){return e.createElement(N,{render:({field:a,formState:{errors:n}})=>e.createElement(e.Fragment,null,e.createElement("div",{className:"w-100 d-flex"},e.createElement(r.InputSwitch,{checked:a.value,disabled:t.disabled,falseValue:t.valueFalse??!1,id:t.id,name:a.name,trueValue:t.valueTrue??!0,onChange:e=>a.onChange(e)}),t.legend&&e.createElement("p",{className:"ms-2 p-inputswitch-legend"},t.legend)),e.createElement(s,{...t,errors:n})),control:t.control,name:t.name})}function k({...t}){return e.createElement(e.Fragment,null,e.createElement("div",{className:"w-100 d-flex"},e.createElement(r.InputSwitch,{checked:t.value,disabled:t.disabled,falseValue:t.valueFalse??!1,id:t.id,name:t.name,trueValue:t.valueTrue??!0,onChange:e=>t.onChange(e.target.value)}),t.legend&&e.createElement("p",{className:"ms-2 p-inputswitch-legend"},t.legend)),e.createElement(s,{...t}))}exports.Switch=function(t){let r=t;return e.createElement(a,{className:t.className,css:t.css,size:t.size??"100"},e.createElement(n,{...t}),t.mode&&"Controlled"!==t.mode?e.createElement(S,{...r}):e.createElement(k,{...r}))};
+//# sourceMappingURL=index.cjs.js.map