Merge branch 'develop'

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
     "react/prop-types": "off",
     "react/jsx-props-no-spreading": "off",
     "react/no-access-state-in-setstate": "off",
+    "react/no-unknown-property": ["error", { ignore: ["w-confirm"] }],
     "@typescript-eslint/no-this-alias": "off",
     "@typescript-eslint/no-shadow": "error",
     "@typescript-eslint/ban-ts-comment": "off",

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.vscode/settings.json

@@ -1,4 +1,6 @@
 {
+  "cSpell.ignoreWords": ["wupln", "aria-labelledby", "wupdark"],
+  "cSpell.allowCompoundWords": true,
   // watchFix: path-intellisense doesn't work with none-js-files https://github.com/ChristianKohler/PathIntellisense/issues/110
   "path-autocomplete.includeExtension": true,
   "path-autocomplete.extensionOnImport": true,

CHANGELOG.md

@@ -1,10 +1,96 @@
 # Changelog
 
+## 1.0.0 (\_\_\_)
+
+### New Features
+
+---
+
+- [ModalElement](src/modalElement.ts.ts) [**demo**](https://yegorich555.github.io/web-ui-pack/modal)
+- **Global**
+  - Added multi language support: override `window.__wupln` (to dynamic change) or global `__wupln` during the compilation (for static change)
+  - Added css variable `--base-margin` to unify margins for all elements
+  - Added support HTML intellisense for WebStorm (no action required from developer/user side)
+- helper [focusFirst](src/helpers/focusFirst.ts). Added option `isFocusLast` & static querySelector (possible to get from `focusFirst.$selector`)
+- [FormElement](src/formElement.ts)
+  - Increased height of `button[type=submit]`
+  - Added callback `$onSubmitEnd` & event `$submitEnd`
+  - Added public method `$submit()` for manual calling
+  - Web Accessibility: auto-tie with closest heading via aria-labelledby
+- **Text based controls**
+  - Added css variable `--ctrl-label-active-pos` to simplify customization of label position
+- [SelectControl](src/controls/select.ts). [SelectManyControl](src/controls/selectMany.ts). Improved handling promise rejection in `$options.items`
+- [SelectManyControl](src/controls/selectMany.ts). Added scrolling style & restricted max-height by default
+
+### Fixes
+
+---
+
+- helper [findScrollParent](src/helpers/findScrollParent.ts). _Returns parent despite on parent.child with position-fixed_
+- helper [promiseWait](src/helpers/promiseWait.ts). _Throws error twice instead of 1 time_
+- [PopupElement](src/popup/popupElement.ts). _Popup hidden if target inside content with position: fixed and target.parent.parent is scrollable_
+- [DropdownElement](src/dropdownElement.ts). _Target button is overflowed by menu in animation-stack_
+- [PasswordControl](src/controls/password.ts). _Input height is changed on button[eye] click_
+- **Text based controls**
+  - _Sometimes weird blink & poor render during the animation on focus_
+  - _Button clear changes control size on hover if parent is flexbox_
+- [SelectControl](src/controls/select.ts). [SelectManyControl](src/controls/selectMany.ts). _storageKey + items as Promise don't work together_
+- [CircleElement](src/circleElement.ts). _Update options/items colors triggers animated re-render with blink_
+
+### BREAKING CHANGES
+
+---
+
+- **Global**.
+
+  - Added static `.$use()`. Call it before using element: `WUPTextControl.$use()` (_self-registration by import_ works now and will be removed in the future)
+  - Renamed css-vars:
+    `--ctrl-select-menu-hover` >>> `--menu-hover-bg`
+    `--anim-time` >>> `--anim-t`
+    `--popup` >>> `popup-text`
+    `--popup-anim` >>> `popup-anim-t`
+    `--tooltip` >>> `tooltip-text`
+    `--spin-speed` >>> `spin-t`
+    `--btn-submit` >>> `--btn-submit-text`
+    `--ctrl` >>> `--ctrl-text`
+    `--ctrl-clr-width` >>> `--ctrl-clr-w`
+    `--ctrl-select-item` >>> `--ctrl-select-item-text`
+    `--ctrl-time-off` >>> `--ctrl-time-off-text`
+    `--ctrl-select-menu-hover` >>> `--menu-hover-bg`
+
+  - Refactored & unified custom events. Now every event contains detail as object: `e.detail = { ... }`
+
+- [PopupElement](src/popup/popupElement.ts)
+  - **z-index** is changed from `90000` to `8000`
+  - Renamed `show/hide` to `open/close` (the same for [DropdownElement](src/dropdownElement.ts)):
+    enum `ShowCases` >>> `PopupShowCases`
+    enum `HideCases` >>> `PopupHideCases`
+    option `showCase` >>> `openCase`
+    method `$show()` >>> `$open()`
+    method `$hide()` >>> `$close()`
+    state-prop `$isShown` >>> `$isOpened`
+    event `$onShown` >>> `$onOpened`
+    etc.
+  - Refactored/normalized enum PopupShowCases
+- **Combobox controls (Select, SelectMany, Date, Time)**
+  - Renamed `show/hide` to `open/close`:
+    enum `ShowCases` >>> `MenuShowCases`
+    enum `HideCases` >>> `MenuHideCases`
+    event `$showMenu` >>> `$openMenu`
+    event `$hideMenu` >>> `$closeMenu`
+    etc.
+
+---
+
+---
+
+---
+
 ## 0.10.2 (Oct 11, 2023)
 
 **Fixes**:
 
--[SelectControl](src/controls/select.ts). [SelectManyControl](src/controls/selectMany.ts). _Error message in console if `$options.items = new Promise` & `$initValue = ...`_
+- [SelectControl](src/controls/select.ts). [SelectManyControl](src/controls/selectMany.ts). _Error message in console if `$options.items = new Promise` & `$initValue = ...`_
 
 ## 0.10.1 (Oct 10, 2023)
 
@@ -31,7 +117,7 @@
 
 **BREAKING CHANGES**:
 
-- **Internals** (**Note:** Skip this if you haven't created custon Elements inherrited from WUP...)
+- **Internals** (**Note:** Skip this if you haven't created custom Elements inherited from WUP...)
   - Added auto-mapping between attributes <=> options based on key-values in `$defaults`
   - TypeScript. Removed interface `Defaults`. Merged with interface `Options` and now contains all fields as required
   - Now removing attributes/options always rollbacks to value defined in `$defaults`
@@ -78,7 +164,7 @@
 - **Controls**
   - `button[clear]` not hidden anymore for required controls (user must have ability to clear all at once & put new text). To rollback it use css-rule `wup-text[required] button[clear] { display: none; }`
   - `button[clear]` visible only on focus & hover. To rollback it use css `wup-text button[clear] { display: block!important; }`
-  - updated hover & focus tyles
+  - updated hover & focus styles
 - **Combobox controls (Select, Date, Time)**
   - Now menu is hidden by default when `autoFocus` enabled. To revert to previous behavior use `WUPSelectControl.$defaults.showCase |= ShowCases.onFocusAuto`
 - [SelectControl](src/controls/select.ts).[SelectManyControl](src/controls/selectMany.ts).
@@ -89,10 +175,10 @@
 
 **BREAKING CHANGES**:
 
-- **Internals** (**Note:** If you haven't created custom Elements inherrited from WUP... - don't pay attention on it).
-  - Refactored `$options` initialization. So all inherrited Elemenents must override only `$defaults` and use `TOptions` as generic instead of overriding $options like it was before.
+- **Internals** (**Note:** If you haven't created custom Elements inherited from WUP... - don't pay attention on it).
+  - Refactored `$options` initialization. So all inherited Elements must override only `$defaults` and use `TOptions` as generic instead of overriding $options like it was before.
   - Deprecated static property **nameUnique**
-  - **Controls**. Dsiable `maxWidthByTarget` for error-popup
+  - **Controls**. Disable `maxWidthByTarget` for error-popup
   - **Global**. Improved styles performance via refactoring selectors
 
 **Fixes**:
@@ -115,7 +201,7 @@
 - [CircleElement](src/circleElement.ts).
   - _wrong tooltip position when segment is half of circle_
   - _wrong console.error when `items=[{value:2}]`_
-  - \*wrong label-value when item value < opion **minsize\***
+  - \*wrong label-value when item value < option **minsize\***
   - _edges of small segment are not rounded according to corner_
 - [TimeControl](src/controls/time.ts).
   - _menu items with wrong sizes and text not aligned_
@@ -201,7 +287,7 @@
   - Added `$defaults.storage` and `$options.skey` to store/get value in different storages `local/session/url`
   - Extended custom validation to `(value, control, reason) => false | string`. Was `(value) => false | string`
   - Hide `button[clear]` by default for disabled/readonly/required
-- **Glolbal**. Added JSDoc comments for `jsx/tsx` files (previously hovering on `<wup-text>` showed nothing)
+- **Global**. Added JSDoc comments for `jsx/tsx` files (previously hovering on `<wup-text>` showed nothing)
 
 ## 0.6.0 (May 19, 2023)
 
@@ -234,9 +320,9 @@
   - Reduced memory consumption via significant refactoring listeners & callback
   - Popup **always closed by keydown Escape** if wasn't prevented (if was opened via default listener)
   - Popup **always closed by focusLost of target & popup** for accessibility purpose (if was opened via default listener)
-  - Ability to call **\$show()** and **\$hide()** with working listeners (previously manuall **$show()** removed all listeners)
+  - Ability to call **\$show()** and **\$hide()** with working listeners (previously manual call of **$show()** removed all listeners)
   - **Controls**. Able to setup `$defaults.validations` (like `WUPNumberControl.$validations = {min: 0}` etc.)
-- **Global**. Added custom callbacks for events. So event `popup.addEventListner("$show",e=>...)` equal to `popup.$onShow = (e)=>...`
+- **Global**. Added custom callbacks for events. So event `popup.addEventListener("$show",e=>...)` equal to `popup.$onShow = (e)=>...`
 
 ## 0.5.2 (Mar 29, 2023)
 
@@ -276,7 +362,7 @@
 - [SwitchControl](src/controls/switch.ts). [CheckControl](src/controls/check.ts). _Attribute `initvalue=''` sets value to `true` (expected `false`)_
 - [TextareaControl](src/controls/textarea.ts). _`Ctrl + B` makes text bold but it's unexpected for plain textarea_
 - **Controls**. _Hover effect on Android devices (expected: no-hover on touch-screens)_
-- **Controls**. _Focus frame isn't rouned on Safari_
+- **Controls**. _Focus frame isn't rounded on Safari_
 - **Controls**. _Attributes `initvalue,min,max` for controls Date & Calendar doesn't work on Safari (Date.parse(yyyy-MM-dd) doesn't work by default)_
 - **Controls**. _Controls are not rendered if parsing initvalue is wrong_
 - **Controls**. _Unexpected autofocus on mask-inputs on Safari_
@@ -308,7 +394,7 @@
 
 - [CalendarControl](src/controls/calendar.ts). Different pickers height after scrolling
 - helper [WUPScrolled](src/helpers/scrolled.ts). maxHeight left after scrolling finished
-- helper [WUPScrolled](src/helpers/scrolled.ts). goto previous sometimes scrolles through the whole range
+- helper [WUPScrolled](src/helpers/scrolled.ts). goto previous sometimes scrolls through the whole range
 
 ## 0.4.0 (Jan 26, 2023)
 
@@ -335,8 +421,8 @@
 
 - helper [localeInfo](src/objects/localeInfo.ts). `AM/PM parsed to 'a' but expected 'A'`
 - helper [dateFromString](src/helpers/dateFromString.ts). `12:00 PM throws Error but expected 12:00`
-- Icon **check**. Reduced thikness to fit other texts & icons
-- [PopupElement](src/popup/popupElement.ts). Changing content size doesn't recalc popup position
+- Icon **check**. Reduced thickness to fit other texts & icons
+- [PopupElement](src/popup/popupElement.ts). Changing content size doesn't re-calc popup position
 - [PopupElement](src/popup/popupElement.ts). Wrong position if parent has style transform.translate
 - [PopupElement](src/popup/popupElement.ts). Content is blured if transform.translate with float values
 - [DateControl](src/controls/date.ts). Clearing input doesn't reset $value
@@ -363,7 +449,7 @@
 
 - Helpers [dateToString](src/helpers/dateToString.ts), [dateFromString](src/helpers/dateFromString.ts). Added support **MMM** format
 - **Text based controls**. Added `$options` `prefix` & `postfix`
-- Controls **Number, Date, Calendar** are locale based and depeneds on [localeInfo](src/objects/localeInfo.ts) helper
+- Controls **Number, Date, Calendar** are locale based and depends on [localeInfo](src/objects/localeInfo.ts) helper
 - Added elements
   - [NumberControl](src/controls/number.ts) [**demo**](https://yegorich555.github.io/web-ui-pack/control/number)
   - [TextareaControl](src/controls/textarea.ts) [**demo**](https://yegorich555.github.io/web-ui-pack/control/textarea)
@@ -443,7 +529,7 @@
 
 - [PopupElement](src/popup/popupElement.ts)
   - Renamed $arrowElement to $refArrow
-  - Added $refresh() - to force update/recalc position when nested content is changed
+  - Added $refresh() - to force update/re-calc position when nested content is changed
   - Added option **animation** with animation-drawer
   - Added option **maxWidthByTarget**
   - Added option **offsetFitElement**

CODESTYLE.md

@@ -1,6 +1,6 @@
 # Code style
 
-Logic below contains best practice for re-using web-ui-pack elements. The main idea is create Component native to your framework and use web-ui-pack elements inside. Using web-ui-pack elements everywhere directly isn't recommended because in this case you need to import components to `main.ts` and if you somehow don't use these anymore it won't be removed by optimizator.
+Logic below contains best practice for re-using web-ui-pack elements. The main idea is create Component native to your framework and use web-ui-pack elements inside. Using web-ui-pack elements everywhere directly isn't recommended because in this case you need to import components to `main.ts` and if you somehow don't use these anymore it won't be removed by optimizer.
 
 ## Bad practice
 
@@ -9,10 +9,10 @@ Code below shows case when developer desides to use WUPTextControl everywhere.
 ```jsx
 // main.ts
 import { WUPTextControl } from "web-ui-pack";
-!WUPTextControl && console.error("!"); // required to avoid side-effects - optimization feature/issue
+WUPTextControl.$use(); // register control in the browser
 // other files.tsx
 <wup-text w-name="email" />;
-// If remove <wup-text/> everywhere it's still imported in the build because inlcuded in `main.ts`
+// If remove <wup-text/> everywhere it's still imported in the build because included in `main.ts`
 ```
 
 ---
@@ -25,12 +25,15 @@ import { WUPTextControl } from "web-ui-pack";
 // main.ts
 import { localeInfo } from "web-ui-pack";
 import { useBuiltinStyle, WUPcssScrollSmall } from "web-ui-pack/styles";
-// use this to update date & number formats according to user locale
+// use this to update `date & number` formats according to user locale
 localeInfo.refresh();
 // OR setup specific locale that doesn't depend on user OS settings
 // localeInfo.refresh("fr-FR");
 // OR skip this if you satisfied with defaults "en-US"
 
+// override global __wuln if you need another language
+window.__wupln = (text, type) => someTranslateFunction(text);
+
 // use this to apply scroll-style from web-ui-pack to all elements with class=".scrolled"
 useBuiltinStyle(
   `${WUPcssScrollSmall(".scrolled")}
@@ -53,12 +56,12 @@ WUPTextControl.$defaults.clearButton = true;
 const defVld = { ...WUPTextControl.$defaults.validationRules };
 const vld = WUPTextControl.$defaults.validationRules;
 // rule "min"
-vld.min = (v, setV, c) => defVld.min.call(c, v, setV, c) && `Min length ${setV} chars`;
+vld.min = (v, setV, c) => defVld.min.call(c, v, setV, c) && __wupln(`Min length ${setV} chars`, "validation");
 // rule "email"
-vld.email = (v, setV) => setV && (!v || !v.includes("@")) && "Invalid email address";
+vld.email = (v, setV) => setV && (!v || !v.includes("@")) && __wupln("Invalid email address", "validation");
 
 // #2.1 override ariaMessages according to required language
-WUPTextControl.$ariaError = "Error for";
+WUPTextControl.$ariaError = __wupln("Error for", "aria");
 // check also other props started with `$aria...`: `WUPTextControl.$aria...`
 
 // #3 extend default validations
@@ -69,7 +72,20 @@ declare global {
     }
   }
 }
-vld.isNumber = (v) => !/^[0-9]*$/.test(v) && "Please enter a valid number";
+vld.isNumber = (v) => !/^[0-9]*$/.test(v) && __wupln("Please enter a valid number", "validation");
+
+// WARN to override default messages/textContent you can use `window.__wupln` only and skip overriding above. Example:
+window.__wupln = (text, type) => {
+  switch (type) {
+    case "aria":
+      return text; // leave it as is
+    case "validation":
+      // customize messages here
+      return text;
+    default:
+      return text;
+  }
+};
 ```
 
 ## Step 3 - use inside component