@orangesix/react 1.1.1 → 1.3.1

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");function a(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=a(e);const s=({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)},l=({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"},"*")),i=({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 o=e=>null==e;var c=e=>!o(e)&&!Array.isArray(e)&&(e=>"object"==typeof e)(e)&&!(e=>e instanceof Date)(e),u=e=>c(e)&&e.target?"checkbox"===e.target.type?e.target.checked:e.target.value:e,d="undefined"!=typeof window&&void 0!==window.HTMLElement&&"undefined"!=typeof document;function f(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(d&&(e instanceof Blob||a)||!r&&!c(e))return e;if(t=r?[]:{},r||(e=>{const t=e.constructor&&e.constructor.prototype;return c(t)&&t.hasOwnProperty("isPrototypeOf")})(e))for(const r in e)e.hasOwnProperty(r)&&(t[r]=f(e[r]));else t=e}return t}var m=e=>Array.isArray(e)?e.filter(Boolean):[],b=e=>void 0===e,g=(e,t,r)=>{if(!t||!c(e))return r;const a=m(t.split(/[,[\].]+?/)).reduce(((e,t)=>o(e)?e:e[t]),e);return b(a)||a===e?b(e[t])?r:e[t]:a},y=e=>"boolean"==typeof e,p=(e,t,r)=>{let a=-1;const n=(e=>/^\w*$/.test(e))(t)?[t]:m(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=c(r)||Array.isArray(r)?r:isNaN(+n[a+1])?{}:[]}if("__proto__"===t||"constructor"===t||"prototype"===t)return;e[t]=s,e=e[t]}};const v="blur",_="change",h="all",E=e.createContext(null),V=()=>e.useContext(E);const w="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function x(t){const r=V(),{control:a=r.control,disabled:n,name:s,exact:l}=t||{},[i,o]=e.useState(a._formState),c=e.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1});return w((()=>a._subscribe({name:s,formState:c.current,exact:l,callback:e=>{!n&&o({...a._formState,...e})}})),[s,n,l]),e.useEffect((()=>{c.current.isValid&&a._setValid(!0)}),[a]),e.useMemo((()=>((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]!==h&&(t._proxyFormState[n]=!a||h),r&&(r[n]=!0),e[n]}});return n})(i,a,c.current,!1)),[i,a])}function j(t){const r=V(),{control:a=r.control,name:n,defaultValue:s,disabled:l,exact:i}=t||{},o=e.useRef(s),[c,u]=e.useState(a._getWatch(n,o.current));return w((()=>a._subscribe({name:n,formState:{values:!0},exact:i,callback:e=>!l&&u(((e,t,r,a,n)=>"string"==typeof e?g(r,e,n):Array.isArray(e)?e.map((e=>g(r,e))):r)(n,a._names,e.values||a._formValues,0,o.current))})),[n,a,l,i]),e.useEffect((()=>a._removeUnmounted())),c}const C=t=>t.render(function(t){const r=V(),{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),o=j({control:s,name:a,defaultValue:g(s._formValues,a,g(s._defaultValues,a,t.defaultValue)),exact:!0}),c=x({control:s,name:a,exact:!0}),d=e.useRef(t),m=e.useRef(s.register(a,{...t.rules,value:o,...y(t.disabled)?{disabled:t.disabled}:{}})),h=e.useMemo((()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!g(c.errors,a)},isDirty:{enumerable:!0,get:()=>!!g(c.dirtyFields,a)},isTouched:{enumerable:!0,get:()=>!!g(c.touchedFields,a)},isValidating:{enumerable:!0,get:()=>!!g(c.validatingFields,a)},error:{enumerable:!0,get:()=>g(c.errors,a)}})),[c,a]),E=e.useCallback((e=>m.current.onChange({target:{value:u(e),name:a},type:_})),[a]),w=e.useCallback((()=>m.current.onBlur({target:{value:g(s._formValues,a),name:a},type:v})),[a,s._formValues]),C=e.useCallback((e=>{const t=g(s._fields,a);t&&e&&(t._f.ref={focus:()=>e.focus(),select:()=>e.select(),setCustomValidity:t=>e.setCustomValidity(t),reportValidity:()=>e.reportValidity()})}),[s._fields,a]),S=e.useMemo((()=>({name:a,value:o,...y(n)||c.disabled?{disabled:c.disabled||n}:{},onChange:E,onBlur:w,ref:C})),[a,n,c.disabled,E,w,C,o]);return e.useEffect((()=>{const e=s._options.shouldUnregister||l;s.register(a,{...d.current.rules,...y(d.current.disabled)?{disabled:d.current.disabled}:{}});const t=(e,t)=>{const r=g(s._fields,e);r&&r._f&&(r._f.mount=t)};if(t(a,!0),e){const e=f(g(s._options.defaultValues,a));p(s._defaultValues,a,e),b(g(s._formValues,a))&&p(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._setDisabledField({disabled:n,name:a})}),[n,a,s]),e.useMemo((()=>({field:S,formState:c,fieldState:h})),[S,c,h])}(t));function S({...t}){return e.createElement(C,{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(i,{...t,errors:n})),control:t.control,name:t.name})}function F({...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&&t.onChange(e.target.value)}}),t.legend&&e.createElement("p",{className:"ms-2 p-inputswitch-legend"},t.legend)),e.createElement(i,{...t}))}exports.Switch=function(t){let r=t;return e.createElement(s,{className:t.className,css:t.css,size:t.size??"100"},e.createElement(l,{...t}),t.mode&&"Controlled"!==t.mode?e.createElement(S,{...r}):e.createElement(F,{...r}))};
+//# sourceMappingURL=index.cjs.js.map