openstack-uicore-foundation 4.2.30 → 4.2.31

package/lib/utils/external-store.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("openstack-uicore-foundation",[],t):"object"==typeof exports?exports["openstack-uicore-foundation"]=t():e["openstack-uicore-foundation"]=t()}(this,(()=>(()=>{"use strict";var e={2015:e=>{e.exports=require("react")}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var u=t[o]={exports:{}};return e[o](u,u.exports,r),u.exports}(()=>{r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t}})(),(()=>{r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})}})(),(()=>{r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})();var o={};r.r(o),r.d(o,{createExternalStore:()=>i});var n=r(2015),u=r.n(n);const s=require("use-sync-external-store/shim"),c=require("use-sync-external-store/shim/with-selector"),a=(e,t)=>e===t;function i(e="ExternalStore"){const t=(0,n.createContext)(null),r=()=>{const r=(0,n.useContext)(t);if(null===r)throw new Error(`${e} hooks must be used within their Provider`);return r};return{Provider:({initialValue:e=null,children:r})=>{const o=(0,n.useRef)(e),s=(0,n.useRef)(new Set),c=(0,n.useCallback)((e=>(s.current.add(e),()=>s.current.delete(e))),[]),a=(0,n.useCallback)((()=>o.current),[]),i=(0,n.useCallback)((e=>{o.current=e,s.current.forEach((e=>e()))}),[]),l=(0,n.useMemo)((()=>({subscribe:c,getSnapshot:a})),[c,a]);return u().createElement(t.Provider,{value:l},"function"==typeof r?r(i):r)},useValue:()=>{const{subscribe:e,getSnapshot:t}=r();return(0,s.useSyncExternalStore)(e,t)},useSelector:(e,t=a)=>{const{subscribe:o,getSnapshot:n}=r();return(0,c.useSyncExternalStoreWithSelector)(o,n,n,e,t)}}}return o})()));
+//# sourceMappingURL=external-store.js.map

package/lib/utils/external-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils/external-store.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,8BAA+B,GAAIH,GAChB,iBAAZC,QACdA,QAAQ,+BAAiCD,IAEzCD,EAAK,+BAAiCC,GACvC,CATD,CASGK,MAAM,I,mCCTTH,EAAOD,QAAUK,QAAQ,Q,GCCrBC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaT,QAGrB,IAAIC,EAASK,EAAyBE,GAAY,CAGjDR,QAAS,CAAC,GAOX,OAHAW,EAAoBH,GAAUP,EAAQA,EAAOD,QAASO,GAG/CN,EAAOD,OACf,C,MCrBAO,EAAoBK,EAAKX,IACxB,IAAIY,EAASZ,GAAUA,EAAOa,WAC7B,IAAOb,EAAiB,QACxB,IAAM,EAEP,OADAM,EAAoBQ,EAAEF,EAAQ,CAAEG,EAAGH,IAC5BA,CAAM,C,WCLdN,EAAoBQ,EAAI,CAACf,EAASiB,KACjC,IAAI,IAAIC,KAAOD,EACXV,EAAoBY,EAAEF,EAAYC,KAASX,EAAoBY,EAAEnB,EAASkB,IAC5EE,OAAOC,eAAerB,EAASkB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,C,WCNDX,EAAoBY,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,E,WCClFlB,EAAoBsB,EAAK7B,IACH,oBAAX8B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAerB,EAAS8B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAerB,EAAS,aAAc,CAAEgC,OAAO,GAAO,C,+ECL9D,MAAM,EAA+B3B,QAAQ,gCCAvC,EAA+BA,QAAQ,8CC+FvC4B,EAAcA,CAACjB,EAAGkB,IAAMlB,IAAMkB,EAQ7B,SAASC,EAAoBC,EAAO,iBACvC,MAAMC,GAAUC,EAAAA,EAAAA,eAAc,MAExBC,EAAkBA,KACpB,MAAMC,GAAUC,EAAAA,EAAAA,YAAWJ,GAC3B,GAAgB,OAAZG,EACA,MAAM,IAAIE,MAAM,GAAGN,8CAEvB,OAAOI,CAAO,EAqElB,MAAO,CAAEG,SAvDQA,EAAGC,eAAe,KAAMC,eACrC,MAAMC,GAAWC,EAAAA,EAAAA,QAAOH,GAClBI,GAAeD,EAAAA,EAAAA,QAAO,IAAIE,KAE1BC,GAAYC,EAAAA,EAAAA,cAAaC,IAC3BJ,EAAaK,QAAQC,IAAIF,GAClB,IAAMJ,EAAaK,QAAQE,OAAOH,KAC1C,IAEGI,GAAcL,EAAAA,EAAAA,cAAY,IAAML,EAASO,SAAS,IAElDI,GAAON,EAAAA,EAAAA,cAAanB,IACtBc,EAASO,QAAUrB,EACnBgB,EAAaK,QAAQK,SAAQC,GAAYA,KAAW,GACrD,IAEGC,GAAeC,EAAAA,EAAAA,UAAa,KAAM,CAAGX,YAAWM,iBAAgB,CAACN,EAAWM,IAElF,OACIM,IAAAA,cAACzB,EAAQM,SAAQ,CAACX,MAAO4B,GACA,mBAAbf,EAA0BA,EAASY,GAAQZ,EACpC,EAkCRkB,SAxBFA,KACb,MAAM,UAAEb,EAAS,YAAEM,GAAgBjB,IACnC,OAAOyB,EAAAA,EAAAA,sBAAqBd,EAAWM,EAAY,EAsB1BS,YAXTA,CAACC,EAASC,EAAUlC,KACpC,MAAM,UAAEiB,EAAS,YAAEM,GAAgBjB,IACnC,OAAO6B,EAAAA,EAAAA,kCACHlB,EACAM,EACAA,EACAU,EACAC,EACH,EAIT,C","sources":["webpack://openstack-uicore-foundation/webpack/universalModuleDefinition","webpack://openstack-uicore-foundation/external commonjs \"react\"","webpack://openstack-uicore-foundation/webpack/bootstrap","webpack://openstack-uicore-foundation/webpack/runtime/compat get default export","webpack://openstack-uicore-foundation/webpack/runtime/define property getters","webpack://openstack-uicore-foundation/webpack/runtime/hasOwnProperty shorthand","webpack://openstack-uicore-foundation/webpack/runtime/make namespace object","webpack://openstack-uicore-foundation/external commonjs \"use-sync-external-store/shim\"","webpack://openstack-uicore-foundation/external commonjs \"use-sync-external-store/shim/with-selector\"","webpack://openstack-uicore-foundation/./src/utils/external-store.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"openstack-uicore-foundation\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"openstack-uicore-foundation\"] = factory();\n\telse\n\t\troot[\"openstack-uicore-foundation\"] = factory();\n})(this, () => {\nreturn ","module.exports = require(\"react\");","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"use-sync-external-store/shim\");","const __WEBPACK_NAMESPACE_OBJECT__ = require(\"use-sync-external-store/shim/with-selector\");","/**\n * Copyright 2026 OpenStack Foundation\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n * http://www.apache.org/licenses/LICENSE-2.0\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * createExternalStore - Factory for creating React-optimized external stores.\n *\n * Problem:\n *   When a frequently-updating data source (clock, WebSocket, polling, etc.)\n *   pushes its value into shared state (global store, lifted useState, or a\n *   context value), every consuming component re-renders on every update,\n *   even when they only care about a derived condition that rarely changes.\n *\n * Solution:\n *   createExternalStore() returns a Provider and hooks that store the value\n *   in a ref (no re-renders) and use useSyncExternalStore so components\n *   can opt in to updates selectively:\n *\n *   - useValue() → re-renders on every update\n *   - useSelector(compute, isEqual) → re-renders only when the computed result changes\n *\n *   Components that don't call either hook are never affected by updates.\n *\n * How it works:\n *   1. The Provider stores the value in a ref (writing to a ref never triggers\n *      a React re-render) and keeps a Set of listener callbacks.\n *   2. When emit(value) is called, the ref is updated and all listeners are\n *      notified. These listeners come from useSyncExternalStore.\n *   3. useSyncExternalStore (React 18, shimmed for 16/17) calls getSnapshot()\n *      to read the ref, compares with the previous value, and only re-renders\n *      the component if the value changed.\n *   4. useMemo adds a layer on top: it runs a compute function on the raw value\n *      and only re-renders if the computed result changed (checked via isEqual).\n *\n * API:\n *   createExternalStore(name) returns:\n *\n *   - Provider    Wraps your component tree. Pass children as a render function\n *                 to receive the emit callback: (emit) => JSX. Call emit(value)\n *                 each time your data source has a new value.\n *\n *   - useValue()  Returns the latest emitted value. The component re-renders\n *                 on every emit.\n *\n *   - useSelector(compute, isEqual?)\n *                 Returns a derived value. compute(rawValue) runs on every emit,\n *                 but the component only re-renders when isEqual returns false\n *                 (default: ===). Useful when you need to derive something that\n *                 changes less frequently than the raw value.\n *\n *   The name parameter is used in error messages. For example,\n *   createExternalStore('Clock') throws \"Clock hooks must be used within\n *   their Provider\" when a hook is called outside the Provider.\n *\n * For clock-specific usage:\n *   A pre-built clock store is available at:\n *   import { ClockProvider, useClock, useClockSelector } from 'openstack-uicore-foundation/lib/components/clock-context';\n *   This wires createExternalStore to the Clock component so projects don't\n *   have to repeat that boilerplate.\n *\n * Custom store example:\n *   import { createExternalStore } from 'openstack-uicore-foundation/lib/utils/external-store';\n *\n *   const { Provider, useValue, useSelector } = createExternalStore('WebSocket');\n *\n *   const WebSocketProvider = ({ url, children }) => (\n *       <Provider>\n *           {(emit) => (\n *               <>\n *                   <WebSocketSource url={url} onMessage={emit} />\n *                   {children}\n *               </>\n *           )}\n *       </Provider>\n *   );\n *\n *   // Re-renders on every message:\n *   const message = useValue();\n *\n *   // Re-renders only when the derived value changes:\n *   const isActive = useSelector((msg) => msg?.status === 'active');\n **/\n\nimport React, { createContext, useContext, useRef, useCallback, useMemo as reactUseMemo } from 'react';\n// Shim for React 16/17 compatibility, falls back to native in React 18+\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nconst strictEqual = (a, b) => a === b;\n\n/**\n * Creates an external store with a Provider and subscription hooks.\n *\n * @param {string} name - Store name, used in error messages (e.g., \"Clock\", \"WebSocket\")\n * @returns {{ Provider, useValue, useSelector }}\n */\nexport function createExternalStore(name = 'ExternalStore') {\n    const Context = createContext(null);\n\n    const useStoreContext = () => {\n        const context = useContext(Context);\n        if (context === null) {\n            throw new Error(`${name} hooks must be used within their Provider`);\n        }\n        return context;\n    };\n\n    /**\n     * Provider - Wraps your component tree and provides the store.\n     *\n     * Pass children as a render function to receive the `emit` callback:\n     *   <Provider>{(emit) => <Source onUpdate={emit} />}</Provider>\n     *\n     * Or pass children normally if you wire emit externally.\n     *\n     * Pass `initialValue` to seed the store synchronously so that hooks\n     * called before the first emit see a real value instead of null.\n     */\n    const Provider = ({ initialValue = null, children }) => {\n        const valueRef = useRef(initialValue);\n        const listenersRef = useRef(new Set());\n\n        const subscribe = useCallback((callback) => {\n            listenersRef.current.add(callback);\n            return () => listenersRef.current.delete(callback);\n        }, []);\n\n        const getSnapshot = useCallback(() => valueRef.current, []);\n\n        const emit = useCallback((value) => {\n            valueRef.current = value;\n            listenersRef.current.forEach(listener => listener());\n        }, []);\n\n        const contextValue = reactUseMemo(() => ({ subscribe, getSnapshot }), [subscribe, getSnapshot]);\n\n        return (\n            <Context.Provider value={contextValue}>\n                {typeof children === 'function' ? children(emit) : children}\n            </Context.Provider>\n        );\n    };\n\n    /**\n     * useValue - Subscribe to every update.\n     * Component re-renders each time emit() is called.\n     *\n     * @returns {*} The current value, or null before first emit\n     */\n    const useValue = () => {\n        const { subscribe, getSnapshot } = useStoreContext();\n        return useSyncExternalStore(subscribe, getSnapshot);\n    };\n\n    /**\n     * useSelector - Subscribe with a selector function.\n     * Only re-renders when the selected/derived value changes.\n     *\n     * @param {Function} compute - (value) => derivedValue\n     * @param {Function} isEqual - Optional equality function (default: ===)\n     * @returns {*} The computed value\n     */\n    const useSelector = (compute, isEqual = strictEqual) => {\n        const { subscribe, getSnapshot } = useStoreContext();\n        return useSyncExternalStoreWithSelector(\n            subscribe,\n            getSnapshot,\n            getSnapshot,\n            compute,\n            isEqual\n        );\n    };\n\n    return { Provider, useValue, useSelector };\n}\n"],"names":["root","factory","exports","module","define","amd","this","require","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","strictEqual","b","createExternalStore","name","Context","createContext","useStoreContext","context","useContext","Error","Provider","initialValue","children","valueRef","useRef","listenersRef","Set","subscribe","useCallback","callback","current","add","delete","getSnapshot","emit","forEach","listener","contextValue","reactUseMemo","React","useValue","useSyncExternalStore","useSelector","compute","isEqual","useSyncExternalStoreWithSelector"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openstack-uicore-foundation",
-  "version": "4.2.30",
+  "version": "4.2.31",
   "description": "ui reactjs components for openstack marketing site",
   "main": "lib/openstack-uicore-foundation.js",
   "scripts": {
@@ -10,6 +10,9 @@
     "test": "jest"
   },
   "license": "APACHE 2.0",
+  "dependencies": {
+    "use-sync-external-store": "^1.6.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.17.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",

package/readme.md

@@ -18,5 +18,9 @@ import 'sweetalert2/dist/sweetalert2.css';
 1 - yarn build && yarn publish
 
 
+## React compatibility
+
+`createExternalStore` (and the clock context built on it) uses the `use-sync-external-store` shim for React 16/17 compatibility. When React is upgraded to 18+, replace the shim with the native import from `react` and remove the `use-sync-external-store` dependency from package.json.
+
 ## Troubleshoot
 For Python 3.13 and above, yarn install will not work until you install this lib: sudo apt install python3-setuptools